6 November

apps/dashboard-app/app/(dashboard)/automations/_components/Workflow.tsx

@@ -12,7 +12,7 @@ const Workflow = ({workflow}:any) => {
     <Card className=''>
         <CardHeader className=''>
             <CardTitle className='flex items-start justify-between leading-3 '>
-                <div className='flex items-center gap-2 text-button leading-normal'>
+                <div className='flex justify-start items-center flex-wrap gap-2 text-button leading-normal'>
                     {workflow.name}
                     {workflow.publish && <CircleCheckIcon className='w-4 h-4 text-green-400'/>}
                     {!workflow.publish && <CirclePauseIcon className='w-4 h-4 text-red-400'/>}

apps/dashboard-app/app/(dashboard)/automations/editor/[editorId]/_components/Nodes.tsx

@@ -113,10 +113,11 @@ const Nodes = () => {
                 </Label>
                 <Switch id='airplane-mode' onClick={onToggle} defaultChecked={editor.publish!} />
             </div>
-            <div className='flex items-center justify-between gap-2'>
+            <div className='flex items-center gap-2 w-full justify-center'>
                 {showNameEdit ? (
                     <Input
-                        placeholder={editor.name}
+                        className='w-full'
+                        placeholder={name}
                         onChange={(e: any) => setName(e.target.value)}
                         onBlur={handleEditName} // Exit edit mode when clicking outside the input
                         autoFocus // Automatically focus the input when entering edit mode
@@ -128,7 +129,7 @@ const Nodes = () => {
                     </div>
                 )}
             </div>
-            <div className='flex items-center justify-center gap-2 text-sm text-description w-[40%] '>
+            <div className='flex items-center justify-center gap-2 text-sm text-description w-full '>
                 {showDescriptionEdit ? (
                     <Textarea
                         placeholder={editor.description}

apps/dashboard-app/app/(dashboard)/automations/editor/[editorId]/_components/action-forms/code/NotionChildrenComponent.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@repo/ui/atoms/shadcn/Button';
+import { Input } from '@repo/ui/atoms/shadcn/Input';
+import ConfirmDialog from '@repo/ui/molecules/custom/ConfirmDialog';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@repo/ui/molecules/shadcn/Select';
+import { Trash2Icon } from 'lucide-react';
+import React, { useState } from 'react'
+
+const NotionChildrenComponent = ({dbId,access_token,modifyChildrenBody}:any) => {
+   let types = ["embed","callout","table_of_contents","heading_1","heading_2","heading_3","paragraph",
+    "bulleted_list_item","to_do", "numbered_list_item"]
+   const [selectedChildren, setSelectedChildren] = useState<any>([
+    {type: "", value: ""}
+   ]);
+
+   const modifyChild = (index:any, key:any, value:any) => {
+    const pastChildren = [...selectedChildren]
+    pastChildren[index][key] = value
+    setSelectedChildren(pastChildren)
+    modifyChildrenBody(pastChildren)
+   }
+
+   const addChildren = () => {
+    setSelectedChildren([...selectedChildren,{type: "", value: ""}])
+   }
+
+    const removeChildren = (index:any) => {
+     setSelectedChildren(selectedChildren.filter((_:any, i:any) => i !== index))
+    }
+
+  return (
+    <div className='rounded-md border-border/30 border-2 p-4 flex flex-col gap-4 '>
+        {selectedChildren.map((selectedChild:any,index:any) => (
+            <div key={index} className="grid grid-cols-10 gap-2  items-center">
+                <div>Type {index+1}</div>
+                <Select onValueChange={(value) => modifyChild(index,"type",value)}>
+                    <SelectTrigger className='col-span-4'> 
+                        {selectedChildren[index].type}
+                    </SelectTrigger>
+                    <SelectContent>
+                    {types.map((type) => (
+                        <SelectItem key={type} value={type}>{type}</SelectItem>
+                    ))}
+                    </SelectContent>
+                </Select>
+                <Input 
+                    placeholder='Enter Value'  
+                    className='col-span-4' 
+                    onChange={(e) => modifyChild(index,"value",e.target.value)}
+                />
+                <ConfirmDialog
+                    alertActionFunction={() => removeChildren(index)} 
+                    alertTitle='Delete Children' 
+                    alertDescription='Are you sure you want to delete this children?'
+                    buttonDiv={<Trash2Icon className='w-5 h-5 cursor-pointer col-span-1 text-foreground/50' />}
+                    alertActionText='Delete'
+                />
+            </div>
+        ))}
+        <Button onClick={addChildren} variant="outline" className='mt-4'>Add Children</Button>
+    </div>
+  )
+}
+
+export default NotionChildrenComponent

apps/dashboard-app/app/(dashboard)/automations/editor/[editorId]/_components/action-forms/code/NotionCode.tsx

@@ -11,6 +11,7 @@ import SearchableSelect from '@repo/ui/molecules/custom/SearchableSelect';
 import NotionFilterComponent from './NotionFilterComponent';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@repo/ui/molecules/shadcn/Tabs';
 import NotionPropertiesComponent from './NotionPropertiesComponent';
+import NotionChildrenComponent from './NotionChildrenComponent';
 
 
 const NotionCode = () => {
@@ -21,6 +22,7 @@ const NotionCode = () => {
     const [databases, setDatabases] = useState<any>([])
     const [selectedDatabase, setSelectedDatabase] = useState('')
     const [filterBody, setFilterBody] = useState<any>({})
+    const [children, setChildren] = useState<any>({})
     const [properties, setProperties] = useState<any>({})
 
     const [sampleCode, setSampleCode] = useState('');
@@ -32,7 +34,7 @@ const NotionCode = () => {
 
     const fetchSampleQueryDatabaseCode = async () => {
         try {
-            const response = await fetch('/samplePythonCodes/queryNotionDatabase.txt'); // Assuming the file is in the public folder
+            const response = await fetch('/samplePythonCodes/notion/queryNotionDatabase.txt'); // Assuming the file is in the public folder
             let text = await response.text();
             text = text.replaceAll("{{token}}", selectedNotionAccount);
             text = text.replaceAll("{{db_id}}", JSON.parse(selectedDatabase).id.replaceAll("-",""));
@@ -47,7 +49,7 @@ const NotionCode = () => {
 
     const fetchSampleCreatePageCode = async () => {
         try {
-            const response = await fetch('/samplePythonCodes/createNotionPage.txt'); // Assuming the file is in the public folder
+            const response = await fetch('/samplePythonCodes/notion/createNotionPage.txt'); // Assuming the file is in the public folder
             let text = await response.text();
             text = text.replaceAll("{{token}}", selectedNotionAccount);
             text = text.replaceAll("{{db_id}}", JSON.parse(selectedDatabase).id.replaceAll("-",""));
@@ -72,7 +74,7 @@ const NotionCode = () => {
 
     const fetchSampleUpdatePageCode = async () => {
         try {
-            const response = await fetch('/samplePythonCodes/updateNotionPage.txt'); // Assuming the file is in the public folder
+            const response = await fetch('/samplePythonCodes/notion/updateNotionPage.txt'); // Assuming the file is in the public folder
             let text = await response.text();
             text = text.replaceAll("{{token}}", selectedNotionAccount);
 
@@ -96,6 +98,32 @@ const NotionCode = () => {
         }
     };
 
+    const fetchAppendBlockChildren = async () => {
+        try {
+            const response = await fetch('/samplePythonCodes/notion/appendBlockChildren.txt'); // Assuming the file is in the public folder
+            let text = await response.text();
+            text = text.replaceAll("{{token}}", selectedNotionAccount);
+
+
+            let lines = text.split('\n')
+            let childrenIndex= -1
+            // Find the index of the line where `children = []` is located
+            lines.forEach((line:any, index:any) => {
+                if (line.includes('children = []')) {
+                    childrenIndex = index;
+                }
+
+            });
+            lines.splice(childrenIndex+1,0,children.join('\n'))
+            setSampleCode(lines.join('\n'));
+
+
+        } catch (error) {
+            console.error('Error fetching sample query:', error);
+            setSampleCode('// Error fetching the sample query.');
+        }
+    };
+
     const modifyFilterBody = (groupCondition:any,filterGroup:any) => {
         let filterBody:any = {}
         filterBody['filter'] = {}
@@ -151,7 +179,7 @@ const NotionCode = () => {
             }
             else if (property.type === "checkbox"){
                 lines.push(
-                    `properties["${property.name}"] = {"checkbox": "${property.value}"}`
+                    `properties["${property.name}"] = {"checkbox": ${property.value}}`
                 )
             }
             else if (property.type === "select"){
@@ -178,6 +206,28 @@ const NotionCode = () => {
         setProperties(lines)
     }
 
+    const modifyChildrenBody = (children:any) => {
+        let lines:any = []
+        children.forEach((child:any) => {
+            if (child.type === "table_of_contents"){
+                lines.push(
+                    `children.append({"type": "${child.type}"`
+                )
+            }
+            else if(child.type === "embed"){
+                lines.push(
+                    `children.append({"type": "${child.type}", "${child.type}": {"url": "${child.value}"}})`
+                )
+            }
+            else {
+                lines.push(
+                    `children.append({"type": "${child.type}", "${child.type}": {"rich_text": [{"type": "text", "text": {"content": "${child.value}"}}]}})`
+                )
+            }
+        })
+        setChildren(lines)
+    }
+
     useEffect(() => {
         const fetchNotionDetails = async () => {
             if (!userId) return;
@@ -225,6 +275,9 @@ const NotionCode = () => {
                         <TabsTrigger key="Properties" value="Properties" className='flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
                           <div>Properties</div>
                         </TabsTrigger>
+                        <TabsTrigger key="Children" value="Children" className='flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
+                          <div>Children</div>
+                        </TabsTrigger>
                     </TabsList>
                     <TabsContent value='Filters'>
                         <NotionFilterComponent dbId={JSON.parse(selectedDatabase).id.replaceAll("-","")}
@@ -236,6 +289,11 @@ const NotionCode = () => {
                             access_token={selectedNotionAccount}
                             modifyProperties={modifyProperties}/>
                     </TabsContent>
+                    <TabsContent value='Children'>
+                        <NotionChildrenComponent dbId={JSON.parse(selectedDatabase).id.replaceAll("-","")}
+                            access_token={selectedNotionAccount}
+                            modifyChildrenBody={modifyChildrenBody}/>
+                    </TabsContent>
 
                 </Tabs>
             </div>}
@@ -260,6 +318,10 @@ const NotionCode = () => {
                 <Button size="sm" variant="outline"  onClick={fetchSampleUpdatePageCode}>
                     Update Notion Page Sample Code
                 </Button>}
+            {selectedDatabase && 
+                <Button size="sm" variant="outline"  onClick={fetchAppendBlockChildren}>
+                    Append Children Block Sample Code
+                </Button>}
         </div>
         {variable && <input className='p-2 mt-4 w-full' type="text" value={variable} placeholder='Variable Value' />}
         {sampleCode && <textarea className='p-2 mt-4 w-full h-96' value={sampleCode} placeholder='Sample Code' />}

apps/dashboard-app/app/(dashboard)/automations/editor/[editorId]/_components/action-forms/code/NotionFilterComponent.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@repo/ui/atoms/shadcn/Button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/ui/molecules/shadcn/Select';
-import { Checkbox } from '@repo/ui/atoms/shadcn/Checkbox';
 import { Input } from '@repo/ui/atoms/shadcn/Input';
 import { queryNotionDatabaseProperties } from '../../../../../../../actions/notion/notion';
-import { Switch } from '@repo/ui/molecules/shadcn/Switch';
 import { CircleXIcon, RecycleIcon, Trash2Icon } from 'lucide-react';
 import ConfirmDialog from '@repo/ui/molecules/custom/ConfirmDialog';