dev day #62

frontend/src/hooks/usePageElementConfig.ts

@@ -40,11 +40,34 @@ export const useAllPageElementConfigs = (pageType: string) => {
   const [configs, setConfigs] = useState<Record<string, string>>({});
   const [visibility, setVisibility] = useState<Record<string, boolean>>({});
   const [styles, setStyles] = useState<Record<string, Record<string, any>>>({});
+  const [elementOrder, setElementOrder] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     let active = true;
 
+    // Helper function to apply DOM order
+    const applyDOMOrder = (order: string[]) => {
+      const container = document.querySelector('.container');
+      if (!container) return;
+      
+      const sections = Array.from(container.querySelectorAll('[data-element]')) as HTMLElement[];
+      const elementMap = new Map<string, HTMLElement>();
+      sections.forEach(section => {
+        const elementName = section.getAttribute('data-element');
+        if (elementName) {
+          elementMap.set(elementName, section);
+        }
+      });
+      
+      order.forEach((elementName) => {
+        const element = elementMap.get(elementName);
+        if (element && element.parentElement === container) {
+          container.appendChild(element);
+        }
+      });
+    };
+
     const loadConfigs = async () => {
       try {
         const data = await getPageElementConfigs(pageType);
@@ -52,13 +75,25 @@ export const useAllPageElementConfigs = (pageType: string) => {
           const configMap: Record<string, string> = {};
           const visMap: Record<string, boolean> = {};
           
-          data.forEach(config => {
+          // Sort by display_order to get correct element order
+          const sorted = [...data].sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
+          const order = sorted.map(config => config.element_name);
+          
+          sorted.forEach(config => {
             configMap[config.element_name] = config.variant;
             visMap[config.element_name] = config.visible !== false;
           });
           
           setConfigs(configMap);
           setVisibility(visMap);
+          setElementOrder(order);
+          
+          // Apply initial order to DOM if elements exist
+          if (order.length > 0) {
+            requestAnimationFrame(() => {
+              applyDOMOrder(order);
+            });
+          }
         }
       } catch (error) {
         console.error('Failed to load page element configs:', error);
@@ -93,11 +128,8 @@ export const useAllPageElementConfigs = (pageType: string) => {
     // Listen for reorder events
     const handleMyUIbrixReorder = ((event: CustomEvent) => {
       const { order } = event.detail;
-      // Trigger re-render with new order
-      // The actual reordering happens in the parent component
-      window.dispatchEvent(new CustomEvent('myuibrix-order-changed', {
-        detail: { order }
-      }));
+      setElementOrder(order);
+      applyDOMOrder(order);
     }) as EventListener;
 
     // Listen for style changes from VisualStylePanel
@@ -153,5 +185,5 @@ export const useAllPageElementConfigs = (pageType: string) => {
     return styles[elementName];
   };
 
-  return { configs, visibility, styles, getVariant, isVisible, getStyles, loading };
+  return { configs, visibility, styles, elementOrder, getVariant, isVisible, getStyles, loading };
 };