drf-to-mkdoc 0.2.3__py3-none-any.whl → 0.3.0__py3-none-any.whl

drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/request-executor.js

@@ -1,61 +1,259 @@
 // Request execution functionality
 const RequestExecutor = {
-    async executeRequest() {
-        const executeBtn = document.getElementById('executeBtn');
-        if (!executeBtn) return;
-
-        // Validate required parameters
-        const emptyParams = FormManager.validateRequiredParams();
-        if (emptyParams.length > 0) {
-            // Switch to parameters tab if we're on a different tab
-            const activeTab = document.querySelector('.try-out-form .tab.active');
-            if (activeTab && activeTab.getAttribute('data-tab') !== 'parameters') {
-                const parametersTab = document.querySelector('.try-out-form .tab[data-tab="parameters"]');
+    // Show validation error in the appropriate section
+    showValidationError: function(message, section) {
+        let errorContainer;
+        
+        if (section === 'json') {
+            // Show error in JSON validation status
+            errorContainer = document.querySelector('.validation-status');
+            if (errorContainer) {
+                errorContainer.textContent = '✗ ' + message;
+                errorContainer.className = 'validation-status invalid';
+            }
+        } else if (section === 'parameters') {
+            // Show error in parameters section
+            const parametersTab = document.querySelector('[data-tab="parameters"]');
                 if (parametersTab) {
-                    TabManager.switchTab(parametersTab);
-                }
+                window.TabManager?.switchTab(parametersTab);
             }
             
-            this.showValidationError(`Please fill in the required parameters: ${emptyParams.join(', ')}`);
+            // Create or update error message
+            errorContainer = document.querySelector('#parametersError');
+            if (!errorContainer) {
+                errorContainer = document.createElement('div');
+                errorContainer.id = 'parametersError';
+                errorContainer.className = 'error-message';
+                const parametersSection = document.querySelector('#parametersTab .form-section');
+                if (parametersSection) {
+                    parametersSection.insertBefore(errorContainer, parametersSection.firstChild);
+                }
+            }
+            errorContainer.textContent = message;
+            errorContainer.style.display = 'block';
+        }
+    },
+
+    // Clear validation errors
+    clearValidationErrors: function() {
+        // Clear JSON validation status
+        const jsonStatus = document.querySelector('.validation-status');
+        if (jsonStatus) {
+            jsonStatus.textContent = '';
+            jsonStatus.className = 'validation-status';
+        }
+
+        // Clear parameters error
+        const paramsError = document.querySelector('#parametersError');
+        if (paramsError) {
+            paramsError.style.display = 'none';
+        }
+
+        // Clear all input validation states
+        document.querySelectorAll('.error').forEach(el => {
+            el.classList.remove('error');
+        });
+        document.querySelectorAll('.validation-message').forEach(msg => {
+            msg.style.display = 'none';
+        });
+    },
+
+    // Form validation
+    validateInput: function(input) {
+        const isValid = input.value.trim() !== '';
+        const validationMessage = input.parentElement.querySelector('.validation-message');
+        
+        if (!isValid) {
+            input.classList.add('error');
+            if (validationMessage) {
+                validationMessage.textContent = 'This field is required';
+                validationMessage.style.display = 'block';
+            }
+        } else {
+            input.classList.remove('error');
+            if (validationMessage) {
+                validationMessage.textContent = '';
+                validationMessage.style.display = 'none';
+            }
+        }
+        
+        return isValid;
+    },
+
+    // Build complete request data
+    buildRequestData: function() {
+        const baseUrl = document.getElementById('baseUrl')?.value || '';
+        const pathDisplay = document.querySelector('.path-display')?.textContent || '';
+        
+        // Build full URL
+        let fullUrl = baseUrl + pathDisplay;
+        
+        // Replace path parameters
+        const pathParams = {};
+        document.querySelectorAll('#pathParams input').forEach(input => {
+            const param = input.dataset.param;
+            if (param && input.value) {
+                pathParams[param] = input.value;
+                fullUrl = fullUrl.replace(`{${param}}`, encodeURIComponent(input.value));
+            }
+        });
+
+        // Collect query parameters
+        const queryParams = {};
+        document.querySelectorAll('#queryParams .parameter-item').forEach(item => {
+            const nameInput = item.querySelector('.name-input');
+            const valueInput = item.querySelector('.value-input');
+            if (nameInput?.value && valueInput?.value) {
+                queryParams[nameInput.value] = valueInput.value;
+            }
+        });
+
+        // Add query parameters to URL
+        if (Object.keys(queryParams).length > 0) {
+            const queryString = new URLSearchParams(queryParams).toString();
+            fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString;
+        }
+
+        // Collect headers
+        const headers = {};
+        document.querySelectorAll('#requestHeaders .header-item').forEach(item => {
+            const nameInput = item.querySelector('.name-input');
+            const valueInput = item.querySelector('.value-input');
+            if (nameInput?.value && valueInput?.value) {
+                headers[nameInput.value] = valueInput.value;
+            }
+        });
+
+        // Add default headers if not already set
+        if (!headers['Accept']) {
+            headers['Accept'] = '*/*';
+        }
+        if (!headers['User-Agent']) {
+            headers['User-Agent'] = navigator.userAgent;
+        }
+        if (!headers['Accept-Language']) {
+            headers['Accept-Language'] = navigator.language || 'en-US,en;q=0.9';
+        }
+        if (!headers['Accept-Encoding']) {
+            headers['Accept-Encoding'] = 'gzip, deflate, br';
+        }
+        if (!headers['Connection']) {
+            headers['Connection'] = 'keep-alive';
+        }
+        if (!headers['Cache-Control']) {
+            headers['Cache-Control'] = 'no-cache';
+        }
+
+        // Add cookies if available
+        if (document.cookie) {
+            headers['Cookie'] = document.cookie;
+        }
+
+        // Get request body
+        const bodyEditor = document.getElementById('requestBody');
+        let body = null;
+        if (bodyEditor?.value.trim()) {
+            try {
+                body = JSON.parse(bodyEditor.value);
+            } catch (e) {
+                body = bodyEditor.value;
+            }
+        }
+
+        // Get method
+        const methodBadge = document.querySelector('.method-badge');
+        const method = methodBadge?.dataset.method || 'GET';
+
+        return {
+            url: fullUrl,
+            method,
+            headers,
+            body,
+            pathParams,
+            queryParams
+        };
+    },
+    async executeRequest() {
+        const executeBtn = document.querySelector('[data-action="send"], .primary-button, .primary-btn, #executeBtn');
+        if (!executeBtn) {
+            console.warn('Execute button not found');
+            return;
+        }
+
+        // Validate required fields
+        const requiredInputs = document.querySelectorAll('#pathParams input[required]');
+        let emptyFields = [];
+        
+        requiredInputs.forEach(input => {
+            if (!input.value.trim()) {
+                const paramName = input.dataset.param || 'parameter';
+                emptyFields.push(paramName);
+                this.validateInput(input);
+            }
+        });
+
+        if (emptyFields.length > 0) {
+            this.showValidationError(`Please fill in required fields: ${emptyFields.join(', ')}`, 'parameters');
             return;
         }
 
         // Show loading state
         this.setLoadingState(executeBtn, true);
 
+        const startTime = Date.now();
+        
         try {
-            const startTime = Date.now();
-            const url = FormManager.buildRequestUrl();
-            const headers = FormManager.getRequestHeaders();
-            const body = FormManager.getRequestBody();
-            const method = document.querySelector('.try-out-form')?.getAttribute('data-method') || 'GET';
+            const requestData = this.buildRequestData();
 
             const requestOptions = {
-                method: method.toUpperCase(),
-                headers: headers
+                method: requestData.method.toUpperCase(),
+                headers: requestData.headers
             };
 
             // Add body for non-GET requests
-            if (body && !['GET', 'HEAD'].includes(method.toUpperCase())) {
-                if (typeof body === 'string') {
-                    requestOptions.body = body;
+            if (requestData.body && !['GET', 'HEAD'].includes(requestData.method.toUpperCase())) {
+                if (typeof requestData.body === 'string') {
+                    requestOptions.body = requestData.body;
                 } else {
-                    requestOptions.body = JSON.stringify(body);
-                    if (!headers['Content-Type']) {
+                    requestOptions.body = JSON.stringify(requestData.body);
+                    if (!requestData.headers['Content-Type']) {
                         requestOptions.headers['Content-Type'] = 'application/json';
                     }
                 }
             }
 
-            const response = await fetch(url, requestOptions);
+            // Show response section
+            const responseSection = document.querySelector('.response-section');
+            if (responseSection) {
+                responseSection.hidden = false;
+            }
+
+            const response = await fetch(requestData.url, requestOptions);
             const responseTime = Date.now() - startTime;
             const responseText = await response.text();
 
-            ModalManager.showResponseModal(response.status, responseText, responseTime);
+            // Convert response headers to object
+            const responseHeaders = {};
+            response.headers.forEach((value, key) => {
+                // Handle multiple headers with the same name (like Set-Cookie)
+                if (responseHeaders[key]) {
+                    if (Array.isArray(responseHeaders[key])) {
+                        responseHeaders[key].push(value);
+                    } else {
+                        responseHeaders[key] = [responseHeaders[key], value];
+                    }
+                } else {
+                    responseHeaders[key] = value;
+                }
+            });
+
+            ModalManager.showResponseModal(response.status, responseText, responseTime, responseHeaders, requestData.headers);
 
         } catch (error) {
-            let errorMessage = error.message || 'Unknown error occurred';
-            ModalManager.showResponseModal('Error', errorMessage);
+            console.error('Request failed:', error);
+            const requestData = this.buildRequestData();
+            const errorTime = Date.now() - startTime;
+            ModalManager.showResponseModal('Error', error.message || 'Unknown error occurred', errorTime, null, requestData.headers);
         } finally {
             this.setLoadingState(executeBtn, false);
         }
@@ -63,49 +261,67 @@ const RequestExecutor = {
 
     setLoadingState(button, loading) {
         button.disabled = loading;
-        button.innerHTML = '';
         
         if (loading) {
-            const spinner = document.createElement('div');
-            spinner.className = 'spinner';
-            const text = document.createTextNode(' Sending...');
-            button.appendChild(spinner);
-            button.appendChild(text);
+            button.classList.add('loading');
+            const spinner = button.querySelector('.loading-spinner');
+            if (spinner) {
+                spinner.style.display = 'inline-block';
+            }
         } else {
-            const playIcon = document.createElement('span');
-            playIcon.textContent = '▶';
-            const text = document.createTextNode(' Execute Request');
-            button.appendChild(playIcon);
-            button.appendChild(text);
+            button.classList.remove('loading');
+            const spinner = button.querySelector('.loading-spinner');
+            if (spinner) {
+                spinner.style.display = 'none';
+            }
         }
     },
 
-    showValidationError(message) {
-        // Create or update validation error display
-        let errorDiv = document.getElementById('validation-error');
-        if (!errorDiv) {
-            errorDiv = document.createElement('div');
-            errorDiv.id = 'validation-error';
-            errorDiv.className = 'error-message show';
-            
-            const executeBtn = document.getElementById('executeBtn');
-            if (executeBtn) {
-                executeBtn.parentNode.insertBefore(errorDiv, executeBtn);
-            }
+    // JSON formatting and validation
+    formatJson: function() {
+        const editor = document.getElementById('requestBody');
+        if (!editor) return;
+
+        try {
+            const formatted = JSON.stringify(JSON.parse(editor.value), null, 2);
+            editor.value = formatted;
+            this.validateJson();
+        } catch (e) {
+            this.showValidationError('Invalid JSON format', 'json');
         }
+    },
+
+    validateJson: function() {
+        const editor = document.getElementById('requestBody');
+        const status = document.querySelector('.validation-status');
         
-        errorDiv.textContent = message;
-        errorDiv.classList.add('show');
-        
-        // Auto-hide after 5 seconds
-        setTimeout(() => {
-            errorDiv.classList.remove('show');
-        }, 5000);
-    }
+        if (!editor || !status) return true;
+
+        if (!editor.value.trim()) {
+            status.textContent = '';
+            status.className = 'validation-status';
+            return true;
+        }
+
+        try {
+            JSON.parse(editor.value);
+            status.textContent = '✓ Valid JSON';
+            status.className = 'validation-status valid';
+            return true;
+        } catch (e) {
+            status.textContent = '✗ ' + e.message;
+            status.className = 'validation-status invalid';
+            return false;
+        }
+    },
+
+    // This method is now handled by the main showValidationError method above
 };
 
-// Global function for onclick handlers
+// Global functions for onclick handlers and backward compatibility
 window.executeRequest = () => RequestExecutor.executeRequest();
+window.formatJson = () => RequestExecutor.formatJson();
+window.validateJson = () => RequestExecutor.validateJson();
 
 // Export for global access
 window.RequestExecutor = RequestExecutor;

drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/response-modal.js

@@ -0,0 +1,173 @@
+// Response modal functionality
+const ResponseModalManager = {
+    init: function() {
+        // Tab switching
+        const tabs = document.querySelectorAll('.response-tabs .tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => this.switchTab(tab));
+        });
+
+        // Initialize syntax highlighting
+        this.initializePrism();
+    },
+
+    switchTab: function(tab) {
+        if (!tab) return;
+        
+        // Remove active class from all tabs and content
+        document.querySelectorAll('.response-tabs .tab').forEach(t => {
+            if (t && t.classList) {
+                t.classList.remove('active');
+                t.setAttribute('aria-selected', 'false');
+            }
+        });
+        document.querySelectorAll('.tab-content').forEach(c => {
+            if (c && c.classList) {
+                c.classList.remove('active');
+            }
+        });
+
+        // Add active class to clicked tab and its content
+        if (tab.classList) {
+            tab.classList.add('active');
+            tab.setAttribute('aria-selected', 'true');
+        }
+        const contentId = tab.getAttribute('aria-controls');
+        const contentElement = document.getElementById(contentId);
+        if (contentElement && contentElement.classList) {
+            contentElement.classList.add('active');
+        }
+    },
+
+    copyResponse: function() {
+        const responseBody = document.getElementById('modalResponseBody');
+        if (!responseBody) return;
+        
+        const responseText = responseBody.textContent;
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(responseText).then(() => {
+                this.showToast('Response copied to clipboard');
+            }).catch(() => {
+                this.showToast('Failed to copy response');
+            });
+        } else {
+            this.showToast('Clipboard not supported');
+        }
+    },
+
+    downloadResponse: function() {
+        const responseBody = document.getElementById('modalResponseBody');
+        if (!responseBody) return;
+        
+        const responseText = responseBody.textContent;
+        const blob = new Blob([responseText], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'response.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        this.showToast('Response downloaded');
+    },
+
+    formatResponse: function() {
+        try {
+            const responseBody = document.getElementById('modalResponseBody');
+            if (!responseBody) return;
+            
+            const content = responseBody.textContent;
+            if (!content.trim()) return;
+            
+            try {
+                const parsed = JSON.parse(content);
+                responseBody.textContent = JSON.stringify(parsed, null, 2);
+            } catch (e) {
+                // If not JSON, just return as is
+                console.log('Response is not valid JSON, skipping formatting');
+            }
+        } catch (error) {
+            console.error('Error formatting response:', error);
+        }
+    },
+
+    collapseAll: function() {
+        const responseBody = document.getElementById('modalResponseBody');
+        if (!responseBody) return;
+        
+        // Simple collapse - replace newlines with spaces for basic collapse
+        const content = responseBody.textContent;
+        if (content) {
+            responseBody.textContent = content.replace(/\n\s*/g, ' ').trim();
+        }
+    },
+
+    expandAll: function() {
+        const responseBody = document.getElementById('modalResponseBody');
+        if (!responseBody) return;
+        
+        const content = responseBody.textContent;
+        if (!content.trim()) return;
+        
+        try {
+            // Try to format as JSON first
+            const parsed = JSON.parse(content);
+            responseBody.textContent = JSON.stringify(parsed, null, 2);
+        } catch (e) {
+            // If not JSON, just restore original formatting
+            responseBody.textContent = content;
+        }
+    },
+
+    showToast: function(message) {
+        // Create toast element
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #333;
+            color: white;
+            padding: 12px 20px;
+            border-radius: 4px;
+            z-index: 10000;
+            font-size: 14px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        `;
+        
+        document.body.appendChild(toast);
+        
+        // Show toast
+        setTimeout(() => {
+            toast.style.opacity = '1';
+        }, 10);
+        
+        // Hide toast after 3 seconds
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.parentNode.removeChild(toast);
+                }
+            }, 300);
+        }, 3000);
+    },
+
+    initializePrism: function() {
+        // Basic syntax highlighting placeholder
+        // This would integrate with Prism.js if available
+        console.log('Syntax highlighting initialized');
+    }
+};
+
+// Export for global access
+window.ResponseModalManager = ResponseModalManager;
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    ResponseModalManager.init();
+});