@gnar-engine/cli 1.0.3 → 1.0.5

package/bootstrap/services/portal/src/components/PageBlockSwitch/PageBlockSwitch.jsx

@@ -0,0 +1,129 @@
+import TextInput from '../../elements/TextInput/TextInput';
+import Repeater from '../../elements/Repeater/Repeater';
+import RichTextInput from '../../elements/RichTextInput/RichTextInput';
+import ImageInput from '../../elements/ImageInput/ImageInput';
+import { v4 as uuidv4 } from 'uuid';
+
+function PageBlockSwitch({ block, pageBlocks, updatePageBlocks, blockIndex, allBlocks, parentBlockInstanceId }) {
+
+    return (
+        <>
+            {block.fields.map(field => {
+                switch (field.type) {
+
+                    // text input
+                    case 'text':
+                        return (
+                            <TextInput
+                                key={field.key}
+                                label={field.name}
+                                placeholder={`Enter ${field.name}`}
+                                value={field.value || ''}
+                                onChange={(e) => {
+                                    const newBlock = {
+                                        ...block,
+                                        fields: block.fields.map(f => ({ ...f }))
+                                    };
+                                    const newField = newBlock.fields.find(f => f.key === field.key);
+                                    newField.value = e.target.value;
+                                    updatePageBlocks(newBlock);
+                                }}
+                                errorMessage={`Invalid ${field.name}`}
+                                isValid={true}
+                            />
+                        );
+
+                    // rich text
+                    case 'richtext':
+                        return (
+                            <RichTextInput
+                                key={field.key}
+                                label={field.name}
+                                value={field.value || ''}
+                                onChange={(value) => {
+                                    const newBlock = {
+                                        ...block,
+                                        fields: block.fields.map(f => ({ ...f }))
+                                    };
+                                    const newField = newBlock.fields.find(f => f.key === field.key);
+                                    newField.value = value;
+                                    updatePageBlocks(newBlock);
+                                }}
+                                errorMessage={`Invalid ${field.name}`}
+                                isValid={true}
+                            />
+                        );
+
+                    // image input
+                    case 'image':
+                        return (
+                            <ImageInput
+                                key={field.key}
+                                label={field.name}
+                                value={field.value || ''}
+                                onChange={(base64File, mimeType, fileName) => {
+                                    const newBlock = {
+                                        ...block,
+                                        fields: block.fields.map(f => ({ ...f }))
+                                    };
+                                    const newField = newBlock.fields.find(f => f.key === field.key);
+                                    newField.value = newField.value || {};
+                                    newField.value.file = base64File;
+                                    newField.value.mimeType = mimeType;
+                                    newField.value.fileName = fileName;
+                                    updatePageBlocks(newBlock);
+                                }}
+                                errorMessage={`Invalid ${field.name}`}
+                                isValid={true}
+                            />
+                        );
+
+                    // repeater
+                    case 'repeater':
+                        const newRepeaterBlock = allBlocks.find(b => b.key === field.repeaterType);
+                        const defaultItem = {
+                            ...newRepeaterBlock,
+                            instanceId: uuidv4(),
+                            fields: newRepeaterBlock.fields.map(f => ({ ...f }))
+                        };
+                        delete defaultItem.id;
+                        const existingRepeaterBlocks =  block.fields.find(f => f.key === field.key)?.value || [];
+
+                        return (
+                            <div className="nested-block">
+                                <Repeater
+                                    items={existingRepeaterBlocks}
+                                    setItem={(item, index, remove = false) => {
+                                        const parentInstanceId = block.instanceId;
+                                        updatePageBlocks({
+                                            ...item,
+                                            fields: item.fields.map(f => ({ ...f })) 
+                                        }, parentInstanceId, item.key, remove);
+                                    }}
+                                    defaultItem={defaultItem}
+                                    buttonText={`Add ${field.name}`}
+                                    renderRow={(item, index, updateItem) => {
+                                        console.log('Rendering nested PageBlockSwitch for item:', item);
+
+                                        return (
+                                            <PageBlockSwitch
+                                                block={item}
+                                                pageBlocks={pageBlocks}
+                                                updatePageBlocks={updatePageBlocks}
+                                                blockIndex={index}
+                                                allBlocks={allBlocks}
+                                                parentBlockInstanceId={block.instanceId}
+                                            />
+                                        )
+                                    }}
+                                />
+                            </div>
+                        );
+
+                }
+            })}
+        </>
+    )
+}
+
+export default PageBlockSwitch;

package/bootstrap/services/portal/src/components/Sidebar/Sidebar.jsx

@@ -0,0 +1,33 @@
+import UserInfo from "../UserInfo/UserInfo";
+import { Link } from "react-router-dom";
+
+function Sidebar() {
+
+    return (
+        <div className="portal-sidebar">
+            <div className="inner">
+                <ul>
+                    <li className="icon-dashboard"><Link to="/portal/dashboard">Dashboard</Link></li>
+                </ul>
+                <span className="separator"></span>
+                <ul>
+                    <li className="icon-users"><Link to="/portal/users">Users</Link></li>
+                </ul>
+                <span className="separator"></span>
+                <ul>
+                    <li className="icon-users"><Link to="/portal/pages">Pages</Link></li>
+                    <li><Link to="/portal/blocks">Blocks</Link></li>
+                </ul>
+                <span className="separator"></span>
+                <ul>
+                    <li className="icon-reports"><Link to="/portal/reports">Reports</Link></li>
+                    <li><Link to="/portal/logs">Logs</Link></li>
+                </ul>
+            </div>
+
+            <UserInfo />
+        </div>
+    )
+}
+
+export default Sidebar;

package/bootstrap/services/portal/src/components/Sidebar/Sidebar.less

@@ -0,0 +1,37 @@
+.portal-sidebar {
+    background: @dark-1;
+    min-width: 264px;
+    min-width: 264px;
+    min-height: 100%;
+    padding: 43px 32px;
+    box-sizing: border-box;
+
+    .inner {
+
+        ul {
+            padding: 0px;
+
+            li {
+                list-style: none;
+                background-size: 28px 28px;
+                background-position: left center;
+                background-repeat: no-repeat;
+
+                a {
+                    display: block;
+                    text-decoration: none;
+                    color: @mid-grey;
+                    padding-top: 7px;
+                    padding-bottom: 7px;
+                    padding-left: 50px;
+                    font-size: 18px;
+                    cursor: pointer;
+                }
+
+                &:first-of-type a {
+                    color: @white;
+                }
+            }
+        }
+    }
+}

package/bootstrap/services/portal/src/components/Topbar/Topbar.jsx

@@ -0,0 +1,19 @@
+import { useState} from "react";
+
+function Topbar() {
+
+    const [agentQuest, setAgentQuestion] = useState('');
+
+    return (
+        <div className="portal-topbar">
+            <div className="content flex-row">
+                <label className="input icon icon-agent agent-question">
+                    Engine Agent
+                    <input type="text" id="agent-question" placeholder="I'll be able to help you with tasks soon!" />
+                </label>
+            </div>
+        </div>
+    )
+}
+
+export default Topbar;

package/bootstrap/services/portal/src/components/Topbar/Topbar.less

@@ -0,0 +1,22 @@
+.portal-topbar {
+    background: @green-main;
+    min-height: 100vh;
+    width: 100%;
+
+    .content {
+        padding-left: 45px;
+        padding-right: 45px;
+        box-sizing: border-box;
+    }
+
+    >.flex-row {
+        height: 71px;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .agent-question {
+        width: 50%;
+        box-sizing: border-box;
+    }
+}

package/bootstrap/services/portal/src/components/UserInfo/UserInfo.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { getGravatarUrl } from "../../services/gravatar";
+
+function UserInfo() {
+
+    const { authUser } = useSelector((state) => state.auth);
+    const [loading, setLoading] = useState(true);
+    const [gravatarUrl, setGravatarUrl] = useState('');
+
+    useEffect(() => {
+        if (authUser && authUser.email) {
+            const gravatar = getGravatarUrl(authUser.email, { size: 100 });
+            setGravatarUrl(gravatar);
+            setLoading(false);
+        }
+    }, [authUser])
+
+    return (
+        <div className="user-info">
+            {authUser && !loading && (
+                <div className="user-info-mini flex-row">
+                    {gravatarUrl && (
+                        <img src={gravatarUrl} alt="User Gravatar" className="gravatar-image" />
+                    )}
+                    <span className="email">{authUser.email}</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default UserInfo;

package/bootstrap/services/portal/src/components/UserInfo/UserInfo.less

@@ -0,0 +1,21 @@
+.user-info {
+    position: absolute;
+    bottom: 30px;
+
+    .user-info-mini {
+        align-items: center;
+
+        .email {
+            margin-top: auto;
+            margin-bottom: auto;
+            height: auto;
+            font-size: 18px;
+        }
+    }
+
+    .gravatar-image {
+        width: 35px;
+        border-radius: 20px;
+    }
+}
+