@alpaca-headless/alpaca-headless-nextjs 1.0.21 → 1.0.26

package/dist/esm/editor/ComponentPalette.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabPanel, TabView } from "primereact/tabview";
 import { useEditContext } from "..";
 import ContentTree from "./ContentTree";
 export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
@@ -28,25 +29,25 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
-                    function handleDragStart(event) {
-                        dragStart({ type: "template", templateId: option.id });
-                        event.stopPropagation();
-                    }
-                    function handleDragEnd() {
-                        dragEnd();
-                    }
-                    return (_jsxs("div", { 
-                        //    onClick={directInsert}
-                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
-                    dragStart({
-                        type: "link-component",
-                        templateId: itemNode.templateId,
-                        componentId: itemNode.id,
-                    });
-                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
-                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+    return (_jsxs(TabView, { children: [_jsx(TabPanel, { header: "New", children: _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                        function handleDragStart(event) {
+                            dragStart({ type: "template", templateId: option.id });
+                            event.stopPropagation();
+                        }
+                        function handleDragEnd() {
+                            dragEnd();
+                        }
+                        return (_jsxs("div", { 
+                            //    onClick={directInsert}
+                            draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                    }) }) }), _jsx(TabPanel, { header: "Existing", children: _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                        dragStart({
+                            type: "link-component",
+                            templateId: itemNode.templateId,
+                            componentId: itemNode.id,
+                        });
+                    }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                        (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined }) })] }));
 }
 function collectInsertOptions(page, placeholderKeys) {
     const insertOptionsMap = new Map();

package/dist/esm/editor/EditorClient.js

@@ -74,6 +74,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
     const searchParams = useSearchParams();
     const [selection, setSelection] = useState([]);
     const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [liveUpdatingFields, setLiveUpdatingFields] = useState([]);
     const [currentEditOperation, setCurrentEditOperation] = useState();
     const [dictionary, setDictionary] = useState(dictionaryObject);
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
@@ -141,23 +142,33 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setSelection([result.componentId]);
                 }
                 if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
+                        ? "waitForQuietPeriod"
+                        : "delayed");
             }
         });
         sync();
     }, [currentEditOperation]);
-    const requestRefresh = (waitForQuietPeriod) => {
-        console.log("request refresh with " + waitForQuietPeriod);
-        if (waitForQuietPeriod && refreshTimer) {
+    const requestRefresh = (mode) => {
+        if (mode === "immediate") {
+            console.log("Immediate refresh requested");
+            clearTimeout(refreshTimer);
+            router.refresh();
+            setRefreshCompletedFlag(!refreshCompletedFlag);
+            setRefreshTimer(undefined);
+            return;
+        }
+        console.log("request refresh with mode: " + mode);
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
             clearTimeout(refreshTimer);
         }
-        if (!refreshTimer || waitForQuietPeriod) {
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
             setRefreshTimer(setTimeout(() => {
                 console.log("refreshing");
                 router.refresh();
                 setRefreshCompletedFlag(!refreshCompletedFlag);
                 setRefreshTimer(undefined);
-            }, waitForQuietPeriod ? 2000 : 1000));
+            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
         }
     };
     const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
@@ -262,6 +273,16 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             }
         });
     }
+    const getLiveField = (field) => {
+        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
+            f.language === field.language &&
+            f.version === field.version &&
+            f.itemId === field.itemId);
+        if (existingField)
+            return existingField;
+        setLiveUpdatingFields([...liveUpdatingFields, field]);
+        return field;
+    };
     const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
     const editField = (field, value, noRefresh = true) => {
         var _a;
@@ -294,6 +315,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
         op.noRefresh = noRefresh;
         op.refreshAfterQuietPeriod = !noRefresh;
         op.value = value;
+        getLiveField(field).value = value;
         function getField(fields, id) {
             return Object.values(fields).find((f) => f.id === id);
         }
@@ -343,10 +365,12 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             dragObject,
             dictionary,
             setDictionary,
+            requestRefresh,
             refreshCompletedFlag,
             unresolvedDictionaryKeys,
             setUnresolvedDictionaryKeys,
             updateContentEditingFields,
+            getLiveField,
             showToast: () => { },
             removeComponent: (componentId, callback) => {
                 confirmDialog({
@@ -432,7 +456,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setCurrentEditOperation(op);
                 setDragObject(undefined);
             }),
-        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), pt: {
+        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
                             mask: {
                                 onDragOver: () => setHidePalette(true),
                                 style: {
@@ -449,5 +473,5 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 30, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 30, className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 15, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }

package/dist/esm/editor/FieldList.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext, } from "..";
 import { InputText } from "primereact/inputtext";
 import { Checkbox } from "primereact/checkbox";
 import { SingleLineText } from "./fieldTypes/SingleLineText";
 import { RichTextEditor } from "./fieldTypes/RichTextEditor";
 export function FieldList({ fields }) {
-    if (!fields)
-        return;
+    const editContext = useEditContext();
+    if (!editContext)
+        if (!fields)
+            return;
     if (!Array.isArray(fields))
         fields = Object.values(fields);
     const sections = fields.reduce((acc, value) => {
@@ -20,10 +23,12 @@ export function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
 }
-function getSectionFields(fields) {
-    return fields.map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
+function getSectionFields(fields, editContext) {
+    return fields
+        .map((field) => editContext.getLiveField(field))
+        .map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
 }
 function getFieldEditor(field) {
     switch (field.type) {

package/dist/esm/editor/GraphQL.js

@@ -73,11 +73,10 @@ export function GraphQL({ component }) {
             type: "jsonValue",
         };
         const prettyQuery = format(query);
-        console.log(query);
-        console.log(prettyQuery);
         setQuery(prettyQuery);
         editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
         setShowSpinner(true);
+        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
     }
     return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
 }

package/dist/esm/editor/MediaSelector.js

@@ -37,7 +37,7 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
             }
         });
     }
-    return (_jsx(Dialog, { style: { width: "60%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
                                                 if (selection.length)
                                                     setSelectedFolderId(selection[0]);
                                                 else
@@ -47,7 +47,7 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                                             onMediaSelected(t.id);
                                             onHide();
                                         }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }));
-                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
                             }, children: "Select" })] })] }) }));