From ebb6de5f52d32dc9178fac4c5ec3992b8f887976 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 13 Feb 2025 16:48:02 +0800
Subject: [PATCH] feat: split main conten

---
 web/app/(commonLayout)/datasets/Container.tsx |  6 ++-
 .../{create-modal.tsx => create-content.tsx}  | 14 +++---
 .../metadata/create-metadata-modal.tsx        | 43 +++++++++++++++++++
 3 files changed, 55 insertions(+), 8 deletions(-)
 rename web/app/components/datasets/metadata/{create-modal.tsx => create-content.tsx} (96%)
 create mode 100644 web/app/components/datasets/metadata/create-metadata-modal.tsx

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 7546926043..331cfe4a45 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -20,7 +20,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import CreateModal from '@/app/components/datasets/metadata/create-modal'
+import CreateModal from '@/app/components/datasets/metadata/create-metadata-modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -83,7 +83,9 @@ const Container = () => {
 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
-      <CreateModal hasBack onSave={(data) => { console.log(data) }} />
+      <div className='ml-[600px] mt-[300px]'>
+        <CreateModal trigger={<Button className='w-[200px]'>open</Button>} hasBack onSave={(data) => { console.log(data) }} />
+      </div>
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
         <TabSliderNew
           value={activeTab}
diff --git a/web/app/components/datasets/metadata/create-modal.tsx b/web/app/components/datasets/metadata/create-content.tsx
similarity index 96%
rename from web/app/components/datasets/metadata/create-modal.tsx
rename to web/app/components/datasets/metadata/create-content.tsx
index 4b988e9035..7569199ae1 100644
--- a/web/app/components/datasets/metadata/create-modal.tsx
+++ b/web/app/components/datasets/metadata/create-content.tsx
@@ -1,29 +1,30 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import ModalLikeWrap from '../../base/modal-like-wrap'
-import { useTranslation } from 'react-i18next'
 import { DataType } from './types'
+import ModalLikeWrap from '../../base/modal-like-wrap'
 import Field from './field'
 import OptionCard from '../../workflow/nodes/_base/components/option-card'
 import Input from '@/app/components/base/input'
 import { RiArrowLeftLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'dataset.metadata.createMetadata'
 
-type Props = {
+export type Props = {
   onSave: (data: any) => void
   hasBack?: boolean
   onBack?: () => void
 }
 
-const CreateModal: FC<Props> = ({
-  onSave,
+const CreateContent: FC<Props> = ({
   hasBack,
   onBack,
+  onSave,
 }) => {
   const { t } = useTranslation()
   const [type, setType] = useState(DataType.string)
+
   const handleTypeChange = useCallback((newType: DataType) => {
     return () => setType(newType)
   }, [setType])
@@ -38,6 +39,7 @@ const CreateModal: FC<Props> = ({
       name,
     })
   }, [onSave, type, name])
+
   return (
     <ModalLikeWrap
       title={t(`${i18nPrefix}.title`)}
@@ -82,4 +84,4 @@ const CreateModal: FC<Props> = ({
     </ModalLikeWrap>
   )
 }
-export default React.memo(CreateModal)
+export default React.memo(CreateContent)
diff --git a/web/app/components/datasets/metadata/create-metadata-modal.tsx b/web/app/components/datasets/metadata/create-metadata-modal.tsx
new file mode 100644
index 0000000000..3e03e974f5
--- /dev/null
+++ b/web/app/components/datasets/metadata/create-metadata-modal.tsx
@@ -0,0 +1,43 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import type { Props as CreateContentProps } from './create-content'
+import CreateContent from './create-content'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+
+type Props = {
+  onSave: (data: any) => void
+  trigger: React.ReactNode
+  popupLeft?: number
+} & CreateContentProps
+
+const CreateMetadataModal: FC<Props> = ({
+  trigger,
+  popupLeft = 20,
+  ...createContentProps
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='left-start'
+      offset={{
+        mainAxis: popupLeft,
+        crossAxis: -38,
+      }}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(!open)}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <CreateContent {...createContentProps} />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem >
+
+  )
+}
+export default React.memo(CreateMetadataModal)