แก้ไขให้ทำงานได้ถูกต้องทุกฟังชั่น

components/sidebar.js

@@ -181,8 +181,107 @@ class AppSidebar extends HTMLElement {
                 <div id="pdf-name" class="file-name">No file selected</div>
             </div>
         </div>
-
         <div class="section">
             <h3><i data-feather="download"></i> Export</h3>
             <button id="btn-download-pdf" class="action-btn btn-primary">
-                <i data
+                <i data-feather="download"></i> Download PDF
+            </button>
+            <button id="btn-download-all" class="action-btn btn-secondary">
+                <i data-feather="download-cloud"></i> Download All
+            </button>
+            <button id="btn-qr-modal" class="action-btn btn-indigo">
+                <i data-feather="grid"></i> Add QR & Download
+            </button>
+        </div>
+
+        <div class="section">
+            <h3><i data-feather="layout"></i> Layout Management</h3>
+            <div class="form-group">
+                <input type="text" id="layout-name-input" placeholder="Layout name" class="form-control mb-2">
+            </div>
+            <div class="form-group">
+                <input type="file" id="layout-import" accept=".json" class="hidden">
+                <label for="layout-import" class="file-label">
+                    <i data-feather="upload"></i> Import Layout
+                </label>
+                <div id="layout-import-name" class="file-name">No file selected</div>
+            </div>
+            <button id="btn-export-layout" class="action-btn btn-secondary">
+                <i data-feather="save"></i> Export Layout
+            </button>
+            <button id="btn-save-layout" class="action-btn btn-primary">
+                <i data-feather="database"></i> Save to History
+            </button>
+            <button id="btn-new-layout" class="action-btn btn-secondary">
+                <i data-feather="file-plus"></i> New Layout
+            </button>
+        </div>
+      </div>
+
+      <!-- Design Mode Sidebar Content -->
+      <div id="sidebar-design" style="display: none;">
+          <div class="section">
+            <h3><i data-feather="sliders"></i> Field Properties</h3>
+            <div id="no-field-selected" class="text-center py-4 text-slate-500">
+              <i data-feather="mouse-pointer" class="w-8 h-8 mx-auto mb-2"></i>
+              <p>Select a field to edit</p>
+            </div>
+            <div id="field-controls" style="display: none;">
+              <div class="form-group">
+                <label>Field ID</label>
+                <div id="prop-id" class="font-mono text-sm p-2 bg-slate-100 dark:bg-slate-700 rounded"></div>
+              </div>
+              <div class="grid grid-cols-2 gap-2">
+                <div class="form-group">
+                  <label for="prop-x">X Position</label>
+                  <input type="number" id="prop-x" class="form-control" step="1">
+                </div>
+                <div class="form-group">
+                  <label for="prop-y">Y Position</label>
+                  <input type="number" id="prop-y" class="form-control" step="1">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="prop-size">Font Size</label>
+                <input type="number" id="prop-size" class="form-control" min="8" max="72">
+              </div>
+              <div class="form-group">
+                <label for="prop-weight">Font Weight</label>
+                <select id="prop-weight" class="form-control">
+                  <option value="normal">Normal</option>
+                  <option value="bold">Bold</option>
+                  <option value="lighter">Light</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label for="prop-color">Text Color</label>
+                <input type="color" id="prop-color" class="form-control h-10">
+              </div>
+            </div>
+          </div>
+          
+          <div class="section">
+            <h3><i data-feather="layout"></i> Layout Actions</h3>
+            <div class="form-group">
+              <input type="text" id="design-layout-name" placeholder="Layout name" class="form-control mb-2">
+            </div>
+            <button id="btn-export-design" class="action-btn btn-secondary">
+              <i data-feather="save"></i> Export Layout
+            </button>
+            <button id="btn-save-design" class="action-btn btn-primary">
+              <i data-feather="database"></i> Save to History
+            </button>
+            <button id="btn-new-design" class="action-btn btn-secondary">
+              <i data-feather="file-plus"></i> New Layout
+            </button>
+          </div>
+      </div>
+`;
+    
+    // Icons
+    feather.replace();
+  }
+}
+
+customElements.define('app-sidebar', AppSidebar);
+

script.js

@@ -86,6 +86,11 @@ function setupGlobalListeners() {
     document.getElementById('btn-save-layout')?.addEventListener('click', saveLayoutToDB);
     document.getElementById('btn-new-layout')?.addEventListener('click', newLayout);
     document.getElementById('layout-import')?.addEventListener('change', (e) => importLayout(e.target.files[0]));
+    
+    // Design Mode Actions
+    document.getElementById('btn-export-design')?.addEventListener('click', exportLayout);
+    document.getElementById('btn-save-design')?.addEventListener('click', saveLayoutToDB);
+    document.getElementById('btn-new-design')?.addEventListener('click', newLayout);
 // View Switching
     document.querySelectorAll('.tab-btn').forEach(btn => {
         btn.addEventListener('click', () => switchTab(btn.dataset.tab));
@@ -728,9 +733,8 @@ function updateTemplateZoom() {
 }
 // --- Export & Generation ---
 async function exportLayout() {
-    const layout = await saveLayoutToStorage();
-    const name = document.getElementById('layout-name-input').value || layout.metadata.name || 'layout';
-    layout.metadata.name = name;
+    const layout = saveLayoutToStorage();
+    const name = layout.metadata.name || 'layout';
     
     const blob = new Blob([JSON.stringify(layout, null, 2)], { type: 'application/json' });
     const link = document.createElement('a');
@@ -740,7 +744,6 @@ async function exportLayout() {
     
     toast('Layout Exported', 'success');
 }
-
 async function importLayout(file) {
     if (!file || !file.name.endsWith('.json')) {
         toast('Please select a layout JSON file', 'error');
@@ -759,24 +762,18 @@ async function importLayout(file) {
             
             state.currentLayoutConfig = layout;
             applyLayoutConfig(layout);
-            
             // Update form inputs
-            document.getElementById('layout-name-input').value = layout.metadata?.name || 'Imported Layout';
+            const layoutNameInput = document.getElementById('layout-name-input') || document.getElementById('design-layout-name');
+            if (layoutNameInput) {
+                layoutNameInput.value = layout.metadata?.name || 'Imported Layout';
+            }
             
-            // Load background images if they are base64
-            layout.pages.forEach(pageConfig => {
-                if (pageConfig.background && pageConfig.background.startsWith('data:')) {
-                    if (pageConfig.id === 'page1') {
-                        state.bg1B64 = pageConfig.background;
-                    } else if (pageConfig.id === 'page2') {
-                        state.bg2B64 = pageConfig.background;
-                    }
-                }
-            });
+            // Apply layout
+            applyLayoutConfig(layout);
             
             toast('Layout Imported Successfully', 'success');
             state.isLayoutLoaded = true;
-        } catch (err) {
+} catch (err) {
             toast('Failed to import layout: ' + err.message, 'error');
             debugLog(err);
         }
@@ -886,13 +883,15 @@ async function importLayout(file) {
             }
             state.currentLayoutConfig = layout;
             applyLayoutConfig(layout);
-            
             // Update form inputs
-            document.getElementById('layout-name-input').value = layout.metadata?.name || 'Unnamed Layout';
+            const layoutNameInput = document.getElementById('layout-name-input') || document.getElementById('design-layout-name');
+            if (layoutNameInput) {
+                layoutNameInput.value = layout.metadata?.name || 'Unnamed Layout';
+            }
             
             toast('Layout Imported Successfully', 'success');
             state.isLayoutLoaded = true;
-        } catch (err) {
+} catch (err) {
             toast('Failed to import layout: ' + err.message, 'error');
             debugLog(err);
         }
@@ -942,7 +941,12 @@ function newLayout() {
         metadata: {}
     };
     state.isLayoutLoaded = false;
-    state.currentLayoutName = 'New Layout';
+    
+    // Reset layout name input
+    const layoutNameInput = document.getElementById('layout-name-input') || document.getElementById('design-layout-name');
+    if (layoutNameInput) {
+        layoutNameInput.value = 'New Layout';
+    }
     
     deselectField();
     localStorage.removeItem('pdf_field_config');