docupulse/static/js/trash.js

/**
 * @fileoverview Manages the trash functionality for the document management system.
 * This file handles the trash view, empty trash operations, and view preferences.
 * It provides functionality to view trashed items in grid or list view,
 * empty the trash, and manage user view preferences.
 */

let currentView = 'grid';

/**
 * Shows the empty trash confirmation modal.
 * @function
 * @global
 * @throws {Error} If the modal element is not found or if there's an error showing the modal
 */
window.showEmptyTrashModal = function() {
    console.log('Showing Empty Trash Modal');
    const modalEl = document.getElementById('emptyTrashModal');
    console.log('Modal Element:', modalEl);
    
    if (!modalEl) {
        console.error('Empty Trash Modal element not found');
        return;
    }
    
    try {
        const modal = new bootstrap.Modal(modalEl);
        console.log('Modal instance created:', modal);
        modal.show();
    } catch (error) {
        console.error('Error showing modal:', error);
    }
};

/**
 * Empties the trash by permanently deleting all trashed files.
 * This function:
 * 1. Fetches all trashed files to get their room IDs
 * 2. Makes API calls to empty trash in each room
 * 3. Updates the UI to reflect the changes
 * @function
 * @global
 * @throws {Error} If CSRF token is not available or if API calls fail
 */
window.emptyTrash = function() {
    console.log('Emptying Trash');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    if (!csrfToken) {
        console.error('CSRF token not available');
        return;
    }

    // Get all trashed files to get their room IDs
    fetch('/api/rooms/trash')
    .then(r => r.json())
    .then(files => {
        if (!files || !files.length) {
            // No files to delete, just close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('emptyTrashModal'));
            modal.hide();
            // Remove the backdrop
            document.querySelector('.modal-backdrop')?.remove();
            document.body.classList.remove('modal-open');
            return Promise.resolve([]);
        }

        // Get unique room IDs
        const roomIds = [...new Set(files.map(file => file.room_id))];
        
        // Create an array of promises for emptying trash in each room
        const emptyPromises = roomIds.map(roomId => 
            fetch(`/api/rooms/${roomId}/trash/empty`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrfToken
                }
            })
        );
        
        // Execute all promises
        return Promise.all(emptyPromises);
    })
    .then(responses => {
        // Check if all responses were successful
        const allSuccessful = responses.every(r => r.ok);
        if (allSuccessful) {
            // Clear all files from the current view
            window.currentFiles = [];
            // Update the grid directly
            const grid = document.getElementById('fileGrid');
            grid.innerHTML = '<div class="col"><div class="text-muted">No items found.</div></div>';
            // Close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('emptyTrashModal'));
            modal.hide();
            // Remove the backdrop
            document.querySelector('.modal-backdrop')?.remove();
            document.body.classList.remove('modal-open');
            // Refresh the view to ensure everything is up to date
            fetchFiles();
        } else {
            console.error('Failed to empty trash in some rooms');
            // Show error message to user
            const grid = document.getElementById('fileGrid');
            grid.innerHTML = '<div class="col"><div class="text-danger">Failed to empty trash. Please try again.</div></div>';
        }
    })
    .catch(error => {
        console.error('Error emptying trash:', error);
        // Show error message to user
        const grid = document.getElementById('fileGrid');
        grid.innerHTML = '<div class="col"><div class="text-danger">Error emptying trash. Please try again.</div></div>';
    });
};

/**
 * Initializes the trash view when the DOM content is loaded.
 * Sets up event listeners for empty trash functionality and initializes the view.
 * @function
 */
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded');
    
    // Add event listener for the empty trash button
    const emptyTrashBtn = document.getElementById('emptyTrashBtn');
    console.log('Empty Trash Button:', emptyTrashBtn);
    
    if (emptyTrashBtn) {
        emptyTrashBtn.addEventListener('click', function(e) {
            console.log('Empty Trash Button Clicked');
            e.preventDefault();
            showEmptyTrashModal();
        });
    }

    // Add event listener for the confirm empty trash button
    const confirmEmptyTrashBtn = document.getElementById('confirmEmptyTrash');
    console.log('Confirm Empty Trash Button:', confirmEmptyTrashBtn);
    
    if (confirmEmptyTrashBtn) {
        confirmEmptyTrashBtn.addEventListener('click', window.emptyTrash);
    }

    // Initialize view
    initializeView();
});

/**
 * Initializes the view based on user preferences.
 * Fetches the user's preferred view (grid or list) and applies it.
 * Falls back to grid view if there's an error.
 * @async
 * @function
 */
async function initializeView() {
    try {
        const response = await fetch('/api/user/preferred_view');
        const data = await response.json();
        currentView = data.preferred_view || 'grid';
        toggleView(currentView);
    } catch (error) {
        console.error('Error fetching preferred view:', error);
        currentView = 'grid';
        toggleView(currentView);
    }
}

/**
 * Toggles between grid and list views.
 * Updates the UI and saves the user's view preference.
 * @function
 * @param {string} view - The view to switch to ('grid' or 'list')
 * @throws {Error} If the view preference cannot be saved
 */
function toggleView(view) {
    currentView = view;
    const grid = document.getElementById('fileGrid');
    const gridBtn = document.getElementById('gridViewBtn');
    const listBtn = document.getElementById('listViewBtn');
    
    // Reset both buttons first
    gridBtn.classList.remove('active');
    listBtn.classList.remove('active');
    
    if (view === 'grid') {
        grid.classList.remove('list-view');
        gridBtn.classList.add('active');
    } else {
        grid.classList.add('list-view');
        listBtn.classList.add('active');
    }
    
    // Save the new preference
    fetch('/api/user/preferred_view', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ preferred_view: view })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Preferred view saved:', data);
    })
    .catch(error => console.error('Error saving preferred view:', error));
}