From f60e65040094a0e531cd4adc4a0eb6ea91dae1f7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 13 Feb 2025 15:34:09 +0800
Subject: [PATCH] feat: create metadata modal

---
 web/app/(commonLayout)/datasets/Container.tsx |  3 +-
 .../components/base/modal-like-wrap/index.tsx | 51 +++++++++++++
 .../datasets/metadata/create-modal.tsx        | 71 +++++++++++++++++++
 .../components/datasets/metadata/field.tsx    | 23 ++++++
 web/app/components/datasets/metadata/types.ts |  5 ++
 5 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/modal-like-wrap/index.tsx
 create mode 100644 web/app/components/datasets/metadata/create-modal.tsx
 create mode 100644 web/app/components/datasets/metadata/field.tsx
 create mode 100644 web/app/components/datasets/metadata/types.ts

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index f484d30a3d..d91af7aad0 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'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -83,6 +83,7 @@ const Container = () => {
 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
+      <CreateModal onSave={(data) => { console.log(data) }} />
       <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/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
new file mode 100644
index 0000000000..131cfdf928
--- /dev/null
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import Button from '../button'
+import { RiCloseLine } from '@remixicon/react'
+
+type Props = {
+  title: string
+  className?: string
+  onClose: () => void
+  onConfirm: () => void
+  children: React.ReactNode
+}
+
+const ModalLikeWrap: FC<Props> = ({
+  title,
+  className,
+  children,
+  onClose,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('w-[320px] px-3 pt-3.5 pb-4 bg-components-panel-bg shadow-xl rounded-2xl border-[0.5px] border-components-panel-border', className)}>
+      <div className='mb-1 flex h-6 items-center justify-between'>
+        <div className='system-xl-semibold text-text-primary'>{title}</div>
+        <div
+          className='p-1.5 text-text-tertiary cursor-pointer'
+          onClick={onClose}
+        >
+          <RiCloseLine className='size-4' />
+        </div>
+      </div>
+      <div className='mt-2'>{children}</div>
+      <div className='mt-4 flex justify-end'>
+        <Button
+          className='mr-2'
+          onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button
+          onClick={onConfirm}
+          variant='primary'
+        >{t('common.operation.save')}</Button>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ModalLikeWrap)
diff --git a/web/app/components/datasets/metadata/create-modal.tsx b/web/app/components/datasets/metadata/create-modal.tsx
new file mode 100644
index 0000000000..ffb2325201
--- /dev/null
+++ b/web/app/components/datasets/metadata/create-modal.tsx
@@ -0,0 +1,71 @@
+'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 Field from './field'
+import OptionCard from '../../workflow/nodes/_base/components/option-card'
+import Input from '@/app/components/base/input'
+
+type Props = {
+  onSave: (data: any) => void
+}
+
+const CreateModal: FC<Props> = ({
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const [type, setType] = useState(DataType.string)
+  const handleTypeChange = useCallback((newType: DataType) => {
+    return () => setType(newType)
+  }, [setType])
+  const [name, setName] = useState('')
+  const handleNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value)
+  }, [setName])
+
+  const handleSave = useCallback(() => {
+    onSave({
+      type,
+      name,
+    })
+  }, [onSave, type, name])
+  return (
+    <ModalLikeWrap
+      title='Create'
+      onClose={() => { }}
+      onConfirm={handleSave}
+    >
+      <div className='space-y-3'>
+        <Field label='Type'>
+          <div className='grid grid-cols-3 gap-2'>
+            <OptionCard
+              title='String'
+              selected={type === DataType.string}
+              onSelect={handleTypeChange(DataType.string)}
+            />
+            <OptionCard
+              title='Number'
+              selected={type === DataType.number}
+              onSelect={handleTypeChange(DataType.number)}
+            />
+            <OptionCard
+              title='Time'
+              selected={type === DataType.time}
+              onSelect={handleTypeChange(DataType.time)}
+            />
+          </div>
+        </Field>
+        <Field label='Name'>
+          <Input
+            value={name}
+            onChange={handleNameChange}
+            placeholder='Add metadata name'
+          />
+        </Field>
+      </div>
+    </ModalLikeWrap>
+  )
+}
+export default React.memo(CreateModal)
diff --git a/web/app/components/datasets/metadata/field.tsx b/web/app/components/datasets/metadata/field.tsx
new file mode 100644
index 0000000000..bdeb6c3150
--- /dev/null
+++ b/web/app/components/datasets/metadata/field.tsx
@@ -0,0 +1,23 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  className?: string
+  label: string
+  children: React.ReactNode
+}
+
+const Field: FC<Props> = ({
+  className,
+  label,
+  children,
+}) => {
+  return (
+    <div className={className}>
+      <div className='py-1 system-sm-semibold text-text-secondary'>{label}</div>
+      <div className='mt-1'>{children}</div>
+    </div>
+  )
+}
+export default React.memo(Field)
diff --git a/web/app/components/datasets/metadata/types.ts b/web/app/components/datasets/metadata/types.ts
new file mode 100644
index 0000000000..fe60f237c9
--- /dev/null
+++ b/web/app/components/datasets/metadata/types.ts
@@ -0,0 +1,5 @@
+export enum DataType {
+  string = 'string',
+  number = 'number',
+  time = 'time',
+}