4495: Seperating qr design

CHANGELOG.md

@@ -8,6 +8,9 @@ See [keep a changelog] for information about writing changes to this log.
 
 ## [Unreleased]
 
+[PR-23](https://github.com/itk-dev/itqr/pull/23)
+    - Seperate visual representation of QR into own config
+    - Live preview of design and download
 [PR-22](https://github.com/itk-dev/itqr/pull/22)
     - Add temporary form login
     - Fix for "tenant null" error on URLs in embedded forms

assets/app.js

@@ -1,10 +1,12 @@
 import './styles/app.css';
 
+const uploadBasePath = 'uploads/qr_codes/';
 document.addEventListener('DOMContentLoaded', () => {
     const qrCodeContainer = document.getElementById('qrCodeContainer');
     const tabsContainer = document.getElementById('qrCodeTabs'); // Navigation tabs
     const tabContentContainer = document.getElementById('qrCodeTabContent'); // Tab content
     const form = document.querySelector('.form-wrapper form');
+    const formName = form.getAttribute('name');
     const selectedQrCodes = document.getElementById('selectedQrCodes');
 
     // Ensure all containers and elements exist
@@ -20,76 +22,161 @@ document.addEventListener('DOMContentLoaded', () => {
         return;
     }
 
+    let isDesignUpdating = false;
+    let updatePromise = null;
+    const designSelect = document.querySelector('#batch_download_design');
+    if (designSelect) {
+        designSelect.addEventListener('change', function () {
+            const selectedOption = this.options[this.selectedIndex];
+
+            if (!selectedOption.value) {
+                // Set default values if no design selected
+                const defaultFields = {
+                    'size': 400,
+                    'margin': 0,
+                    'backgroundColor': '#ffffff',
+                    'foregroundColor': '#000000',
+                    'labelText': '',
+                    'labelSize': 12,
+                    'labelTextColor': '#000000',
+                    'labelMarginTop': 0,
+                    'labelMarginBottom': 0,
+                    'errorCorrectionLevel': 'medium',
+                    'logo': '',
+                    'logoPath': '',
+                };
+
+                Object.entries(defaultFields).forEach(([field, value]) => {
+                    const input = document.querySelector(`#batch_download_${field}`);
+                    if (input) {
+                        input.value = value;
+                    }
+                });
+
+                return;
+            }
+
+            isDesignUpdating = true;
+            // Get the design data using the API Platform endpoint
+            fetch(`/admin/qr_visual_configs/${selectedOption.value}`)
+                .then(response => response.json())
+                .then(design => {
+
+                    // Update form fields with design values
+                    const fields = {
+                        'size': design.size,
+                        'margin': design.margin,
+                        'backgroundColor': design.backgroundColor,
+                        'foregroundColor': design.foregroundColor,
+                        'labelText': design.labelText || '',
+                        'labelSize': design.labelSize,
+                        'labelTextColor': design.labelTextColor,
+                        'labelMarginTop': design.labelMarginTop,
+                        'labelMarginBottom': design.labelMarginBottom,
+                        'errorCorrectionLevel': design.errorCorrectionLevel,
+                        'logoPath': design.logo,
+                    };
+
+                    // Update each form field
+                    Object.entries(fields).forEach(([field, value]) => {
+                        const input = document.querySelector(`#batch_download_${field}`);
+                        if (input) {
+                            input.value = value;
+                        }
+                    });
+
+                    isDesignUpdating = false;
+                })
+                .catch(error => {
+                    console.error('Error fetching design details:', error);
+                    isDesignUpdating = false;
+                });
+        });
+    }
+
     async function updateQRCode() {
+        if (updatePromise) {
+            return updatePromise;
+        }
+
         // Clear tab and content containers
         tabsContainer.innerHTML = '';
         tabContentContainer.innerHTML = '';
 
         // Prepare form data for POST request
         const formData = new FormData(form);
         formData.append('selectedQrCodes', selectedQrCodes.value);
-
-        try {
-            // Fetch the QR codes from the endpoint
-            const response = await fetch(generateQrPath, {
-                method: 'POST',
-                body: formData,
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                const qrCodes = data.qrCodes; // Array of qr titles and generated base64 images
-
-                if (typeof qrCodes === 'object') {
-                    // Loop through all images and create tabs dynamically
-                    Object.entries(qrCodes).forEach(([title, imageSrc]) => {
-                        // Sanitize the title to create valid IDs
-                        const sanitizedTitle = title.replace(/[^a-zA-Z0-9-_]/g, '_');
-
-                        // Create a unique tab ID
-                        const tabId = `qrCodeTab-${sanitizedTitle}`;
-                        const tabPaneId = `qrCodeContent-${sanitizedTitle}`;
-
-                        // Create tab navigation item
-                        const tabItem = document.createElement('li');
-                        tabItem.className = 'nav-item';
-                        tabItem.role = 'presentation';
-                        tabItem.innerHTML = `
-                            <button class="nav-link ${tabsContainer.children.length === 0 ? 'active' : ''}" 
-                                    id="${tabId}" 
-                                    data-bs-toggle="tab" 
-                                    data-bs-target="#${tabPaneId}" 
-                                    type="button" 
-                                    role="tab" 
-                                    aria-controls="${tabPaneId}" 
-                                    aria-selected="${tabsContainer.children.length === 0}">
-                                ${title}
-                            </button>
-                        `;
-                        tabsContainer.appendChild(tabItem);
-
-                        // Create tab content (image)
-                        const tabContent = document.createElement('div');
-                        tabContent.className = `tab-pane fade ${tabsContainer.children.length === 1 ? 'show active' : ''} qr-code-tab-pane`;
-                        tabContent.id = tabPaneId;
-                        tabContent.role = 'tabpanel';
-                        tabContent.innerHTML = `
-                            <img src="${imageSrc}" alt="QR Code titled ${title}" class="qr-code-image">
-                        `;
-                        tabContentContainer.appendChild(tabContent);
-                    });
+        formData.append('formName', formName);
+
+        updatePromise = (async () => {
+            try {
+                formData.forEach((value, key) => {
+                    console.log(key + ': ' + value);
+                });
+                // Fetch the QR codes from the endpoint
+                const response = await fetch(generateQrPath, {
+                    method: 'POST',
+                    body: formData,
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    const qrCodes = data.qrCodes; // Array of qr titles and generated base64 images
+
+                    if (typeof qrCodes === 'object') {
+                        // Loop through all images and create tabs dynamically
+                        Object.entries(qrCodes).forEach(([title, imageSrc]) => {
+                            // Sanitize the title to create valid IDs
+                            const sanitizedTitle = title.replace(/[^a-zA-Z0-9-_]/g, '_');
+
+                            // Create a unique tab ID
+                            const tabId = `qrCodeTab-${sanitizedTitle}`;
+                            const tabPaneId = `qrCodeContent-${sanitizedTitle}`;
+
+                            // Create tab navigation item
+                            const tabItem = document.createElement('li');
+                            tabItem.className = 'nav-item';
+                            tabItem.role = 'presentation';
+                            tabItem.innerHTML = `
+                                <button class="nav-link ${tabsContainer.children.length === 0 ? 'active' : ''}" 
+                                        id="${tabId}" 
+                                        data-bs-toggle="tab" 
+                                        data-bs-target="#${tabPaneId}" 
+                                        type="button" 
+                                        role="tab" 
+                                        aria-controls="${tabPaneId}" 
+                                        aria-selected="${tabsContainer.children.length === 0}">
+                                    ${title === 'examplePreview' ? '' : title}
+                                </button>
+                            `;
+                            tabsContainer.appendChild(tabItem);
+
+                            // Create tab content (image)
+                            const tabContent = document.createElement('div');
+                            tabContent.className = `tab-pane fade ${tabsContainer.children.length === 1 ? 'show active' : ''} qr-code-tab-pane`;
+                            tabContent.id = tabPaneId;
+                            tabContent.role = 'tabpanel';
+                            tabContent.innerHTML = `
+                                <img src="${imageSrc}" alt="QR Code titled ${title}" class="qr-code-image">
+                            `;
+                            tabContentContainer.appendChild(tabContent);
+                        });
+                    } else {
+                        console.error('Invalid data format. Expected an array of QR code images.');
+                    }
                 } else {
-                    console.error('Invalid data format. Expected an array of QR code images.');
+                    console.error('Failed to fetch QR codes. Status:', response.status);
                 }
-            } else {
-                console.error('Failed to fetch QR codes. Status:', response.status);
+            } catch (error) {
+                console.error('Error while fetching QR codes:', error);
+            } finally {
+                updatePromise = null;
             }
-        } catch (error) {
-            console.error('Error while fetching QR codes:', error);
-        }
+        })();
+
+        return updatePromise;
     }
 
-    // Timeout before updating qr code after typing
     let typingTimer;
 
     form.addEventListener('input', () => {
@@ -99,6 +186,5 @@ document.addEventListener('DOMContentLoaded', () => {
             updateQRCode();
         }, 500);
     });
-
     updateQRCode();
 });

assets/styles/app.css

@@ -26,11 +26,10 @@
     transform: translateX(-50%);
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: 5px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    padding: 5px;
     z-index: 1000;
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .popover-content img {
@@ -51,10 +50,18 @@
     background-color: #f9f9f9;
     flex: 1;
     height: 475px;
+    position: sticky;
+    top: 70px;
+    z-index: 100;
 
+    #qrCodeContainer {
+        height: 100%;
+    }
     .nav-link {
         color: #000;
     }
+
+
     .nav-link.active {
         color: #000;
         font-weight: bold;
@@ -66,7 +73,31 @@
 }
 
 .qr-preview .qr-code-image {
-    max-width: 100%;
+    max-height: 400px;
     display: block;
     margin: 15px auto 0 auto;
 }
+
+
+.qr-edit-visual-config-container,
+.qr-new-visual-config-container {
+    display: flex;
+    flex-direction: row;
+    > div {
+        flex: 1;
+    }
+
+    .form-fieldset-body {
+        > div {
+            > div {
+                width: 100%;
+            }
+        }
+    }
+}
+
+form[name="batch_download"] .accordion-button {
+    box-shadow: none;
+    background-color: #fff;
+    border-bottom: 1px solid #e9e9e9;
+}

composer.json

@@ -9,7 +9,7 @@
         "ext-gd": "*",
         "ext-iconv": "*",
         "ext-zip": "*",
-        "api-platform/core": "^4.0.16",
+        "api-platform/core": "^4.0.22",
         "doctrine/dbal": "^3.9.4",
         "doctrine/doctrine-bundle": "^2.13.2",
         "doctrine/doctrine-migrations-bundle": "^3.4.1",
@@ -24,6 +24,7 @@
         "symfony/maker-bundle": "^1.62.1",
         "symfony/runtime": "~7.2.0",
         "symfony/twig-bundle": "~7.2.0",
+        "symfony/ux-twig-component": "^2.25.1",
         "symfony/webpack-encore-bundle": "^2.2",
         "symfony/yaml": "~7.2.0",
         "twig/twig": "^3.19.0"