bmdl-sdk 1.5.9 → 2.0.0

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/SelectSource/SelectSource.tsx

@@ -0,0 +1,252 @@
+import { useTranslations } from 'next-intl'
+
+import { TbApi, TbDatabase } from 'react-icons/tb'
+
+import { Input, Label, Radio, Typography } from '@/components/atoms'
+
+const { Title, Text } = Typography
+
+function SelectSource() {
+	const tg = useTranslations()
+	const t = useTranslations('datasets.creation.steps.two.source')
+	//
+	return (
+		<div className='flex flex-col gap-y-4'>
+			<Input.Search placeholder={tg('search')} />
+			<Title level={5}>{t('title')}</Title>
+			<div className='-mr-6 mb-4 max-h-95 overflow-y-auto pr-4'>
+				<Radio className='flex flex-col gap-y-3'>
+					<Label
+						htmlFor='sourse-1'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>1C_ЗУП</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-1' id='sourse-1' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-2'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>srv-obvp-243.bft.local:8080</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-2' id='sourse-2' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-3'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Тестовый стенд полиматики</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-3' id='sourse-3' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-4'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. НО</Text>
+								<Text muted size={'sm'}>
+									ClickHouse
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-4' id='sourse-4' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-5'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. УО</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-5' id='sourse-5' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-6'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Источник ПА</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-6' id='sourse-6' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-7'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>1C_ЗУП</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-7' id='sourse-7' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-8'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>srv-obvp-243.bft.local:8080</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-8' id='sourse-8' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-9'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Тестовый стенд полиматики</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-9' id='sourse-9' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-10'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. НО</Text>
+								<Text muted size={'sm'}>
+									ClickHouse
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-10' id='sourse-10' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-11'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. УО</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-11' id='sourse-11' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-12'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Источник ПА</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-12' id='sourse-12' />
+					</Label>
+				</Radio>
+			</div>
+		</div>
+	)
+}
+
+export { SelectSource }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/SelectSource/index.ts

@@ -0,0 +1 @@
+export { SelectSource } from './SelectSource'

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/Step2.tsx

@@ -0,0 +1,11 @@
+import { SelectSource } from './SelectSource'
+import { UploadFile } from './UploadFile'
+import { useCreateDataset } from '@/hooks'
+
+function Step2() {
+	const { sourceType } = useCreateDataset()
+
+	return sourceType === 'source' ? <SelectSource /> : <UploadFile />
+}
+
+export { Step2 }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/UploadFile/UploadFile.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+
+import { DatasetFileEncoding } from '@/graphql'
+
+import { Input, Label, Select, Typography, Upload } from '@/components/atoms'
+
+import { useCreateDataset } from '@/hooks'
+import { bytes, SizeStringValue } from '@/utils'
+
+const { Title } = Typography
+
+const maxSize = bytes(
+	process.env.NEXT_PUBLIC_DATASET_MAX_SIZE as SizeStringValue
+)
+
+function UploadFile() {
+	const t = useTranslations('datasets.creation.steps.two.file')
+	//
+	const {
+		setName,
+		//
+		fileInfo,
+		setFileInfo,
+		//
+		datasetFileInfo,
+		setDatasetFileInfo
+	} = useCreateDataset()
+	//
+	const [format, setFormat] = useState('.csv,.txt')
+	//
+	const changeHandler = (files: any[]) => {
+		setName(files[0] ? files[0].originalName! : '')
+		setFileInfo(files[0] ? { ...files[0], progress: 100 } : null)
+		setDatasetFileInfo(prev => {
+			return {
+				...prev,
+				path: files[0]?.path!
+			}
+		})
+	}
+	//
+	return (
+		<div className='mb-4 flex flex-col gap-y-4'>
+			<div className='grid grid-cols-24 gap-4'>
+				<div className='col-span-7 flex flex-col gap-1'>
+					<Label>{t('fields.format')}</Label>
+					<Select defaultValue={format} onValueChange={setFormat}>
+						<Select.Item value='.csv,.txt'>CSV</Select.Item>
+						<Select.Item value='.xlsx,.xls'>XLSX</Select.Item>
+						<Select.Item value='.json'>JSON</Select.Item>
+						<Select.Item value='.xml'>XML</Select.Item>
+					</Select>
+				</div>
+				{/*  */}
+				<div className='col-span-9 flex flex-col gap-1'>
+					<Label>{t('fields.encoding')}</Label>
+					<Select
+						defaultValue={datasetFileInfo.encoding}
+						onValueChange={(value: DatasetFileEncoding) => {
+							setDatasetFileInfo(prev => {
+								return {
+									...prev,
+									encoding: value
+								}
+							})
+						}}
+						disabled={!format.includes('csv')}
+					>
+						{/* <Select.Item value='windows-1251'>
+							windows-1251
+						</Select.Item>
+						<Select.Item value='maccyrillic'>
+							maccyrillic
+						</Select.Item>
+						<Select.Item value='koi8_r'>koi8_r</Select.Item>
+						<Select.Item value='utf-16'>utf-16</Select.Item> */}
+						<Select.Item value={DatasetFileEncoding.Utf_8}>
+							utf-8
+						</Select.Item>
+					</Select>
+				</div>
+				{/*  */}
+				<div className='col-span-8 flex flex-col gap-1'>
+					<Label>{t('fields.separator')}</Label>
+					<Input
+						value={datasetFileInfo.separator}
+						onChange={e => {
+							setDatasetFileInfo(prev => {
+								return {
+									...prev,
+									separator: e.target.value
+								}
+							})
+						}}
+						disabled={!format.includes('csv')}
+					/>
+				</div>
+			</div>
+			<Upload
+				onChange={changeHandler}
+				acceptedTypes={format}
+				maxSize={maxSize}
+				defaultValue={fileInfo ? [fileInfo] : []}
+			/>
+		</div>
+	)
+}
+
+export { UploadFile }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/UploadFile/index.ts

@@ -0,0 +1 @@
+export { UploadFile } from './UploadFile'

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/index.ts

@@ -0,0 +1 @@
+export { Step2 } from './Step2'

package/src/components/organisms/DatasetsTable/Creation/Steps/Step3/Step3.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useEffect } from 'react'
+
+import { useGetColumnsFromFileMutation } from '@/graphql'
+
+import { BsToggles } from 'react-icons/bs'
+import { TbCalendar, TbLetterCase } from 'react-icons/tb'
+
+import { NumberTypeIcon } from '@/components/atoms/icons'
+
+import { Select, Spin, Table, Typography } from '@/components/atoms'
+
+import { useCreateDataset } from '@/hooks'
+
+const { Title, Text } = Typography
+
+function Step3() {
+	const tg = useTranslations()
+	const t = useTranslations('datasets.creation.steps.three')
+	//
+	const { datasetFileInfo, setColumns } = useCreateDataset()
+	//
+	const [getColumnsFromFile, { data, loading }] =
+		useGetColumnsFromFileMutation({
+			onCompleted(data) {
+				setColumns(data.getColumnsFromFile)
+			}
+		})
+	//
+	useEffect(() => {
+		if (datasetFileInfo.path) {
+			getColumnsFromFile({
+				variables: {
+					data: datasetFileInfo
+				}
+			})
+		}
+	}, [datasetFileInfo.path])
+	// const handleUpload = (files: Partial<FileModel>[]) => {
+
+	// }
+	//
+	const typeChangeHandler = (path: string, value: any) => {
+		setColumns(prev => {
+			const changeColumn = prev.find((col: any) => col.path === path)
+			//
+			// if (changeColumn) changeColumn.type = value
+			//
+			return prev
+		})
+	}
+	//
+	const onRowSelectionHandler = (ids: string[]) => {
+		// @ts-ignore
+		setColumns(prev => {
+			// // Проверяем, действительно ли нужно обновление
+			// const currentIds = prev.map(col => col.path).sort()
+			// const newIds = (ids as string[]).sort()
+
+			// if (
+			// 	currentIds.length === newIds.length &&
+			// 	currentIds.every((id, i) => id === newIds[i])
+			// ) {
+			// 	return prev // Возвращаем тот же массив, если нет изменений
+			// }
+
+			return data?.getColumnsFromFile
+				.filter(i => ids.includes(i.path))
+				.map(i => ({
+					name: i.name,
+					path: i.path,
+					type: i.type
+				}))
+		})
+	}
+	//
+	const getTableData = (data: any) => {
+		return data
+			? data.getColumnsFromFile.map((dataItem: any) => {
+					return {
+						id: dataItem.path,
+						name: <Text>{dataItem.name}</Text>,
+						type: (
+							<Select
+								defaultValue={dataItem.type}
+								onValueChange={(value: any) =>
+									typeChangeHandler(dataItem.path, value)
+								}
+								className='w-34'
+							>
+								<Select.Item
+									value={
+										dataItem.type === 'DECIMAL'
+											? 'DECIMAL'
+											: 'BIGINT'
+									}
+								>
+									<NumberTypeIcon /> {tg('typeof.number')}
+								</Select.Item>
+								<Select.Item value='TEXT'>
+									<TbLetterCase /> {tg('typeof.string')}
+								</Select.Item>
+								<Select.Item value='TIMESTAMP'>
+									<TbCalendar /> {tg('typeof.date')}
+								</Select.Item>
+								<Select.Item value='BOOLEAN'>
+									<BsToggles /> {tg('typeof.boolean')}
+								</Select.Item>
+							</Select>
+						)
+					}
+				})
+			: []
+	}
+
+	return (
+		<div className='flex flex-col gap-y-4'>
+			{loading ? (
+				<Spin />
+			) : (
+				<Table
+					inModal
+					isAllChecked
+					dataSource={getTableData(data)}
+					columns={[
+						{
+							key: 'name',
+							title: t('columns.name')
+						},
+						{
+							key: 'type',
+							title: t('columns.type')
+						}
+					]}
+					onRowSelection={onRowSelectionHandler}
+					className='mb-4 max-h-95 overflow-y-auto'
+				/>
+			)}
+		</div>
+	)
+}
+
+export { Step3 }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step3/index.ts

@@ -0,0 +1 @@
+export { Step3 } from './Step3'

package/src/components/organisms/DatasetsTable/Creation/Steps/Step4/Step4.tsx

@@ -0,0 +1,120 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslations } from 'next-intl'
+import { Controller, useForm } from 'react-hook-form'
+
+import { useCreateDatasetMutation } from '@/graphql'
+
+import { TbChevronLeft } from 'react-icons/tb'
+
+import { CheckIcon } from '@/components/atoms/icons'
+
+import {
+	Button,
+	Form,
+	Input,
+	Label,
+	Tags,
+	Textarea,
+	Typography
+} from '@/components/atoms'
+
+import { useCreateDataset } from '@/hooks'
+import { createDatasetSchema, TypeCreateDatasetSchema } from '@/schemas'
+
+const { Title } = Typography
+
+type Step4Props = {
+	prevTabHandler: () => void
+}
+
+function Step4({ prevTabHandler }: Step4Props) {
+	const tg = useTranslations('')
+	const t = useTranslations('datasets.creation.steps.four')
+	//
+	const { name, columns, fileInfo } = useCreateDataset()
+	//
+	const {
+		handleSubmit,
+		control,
+		formState: { errors }
+	} = useForm<TypeCreateDatasetSchema>({
+		resolver: zodResolver(createDatasetSchema),
+		defaultValues: {
+			name,
+			description: ''
+		}
+	})
+	//
+	const [createDataset, { loading }] = useCreateDatasetMutation({
+		onCompleted() {},
+		onError(error) {}
+	})
+	//
+	const onSubmit = (data: TypeCreateDatasetSchema) => {
+		createDataset({
+			variables: {
+				data: {
+					...data,
+					...(fileInfo && { fileId: fileInfo.id }),
+					columns: columns.map(col => {
+						// @ts-ignore
+						delete col.__typename
+						return col
+					})
+				}
+			}
+		})
+	}
+	//
+	return (
+		<div className='flex flex-col gap-y-4'>
+			<Form layout='vertical' onSubmit={handleSubmit(onSubmit)}>
+				<Form.Item>
+					<Label htmlFor='name'>{t('fields.name')}*</Label>
+					<Controller
+						name='name'
+						control={control}
+						render={({ field }) => <Input id='name' {...field} />}
+					/>
+					<Form.Message error={errors.name} />
+				</Form.Item>
+
+				<Form.Item className='max-h-36'>
+					<Label htmlFor='description'>
+						{t('fields.description')}
+					</Label>
+					<Controller
+						name='description'
+						control={control}
+						render={({ field }) => (
+							<Textarea id='description' {...field} />
+						)}
+					/>
+					<Form.Message error={errors.description} />
+				</Form.Item>
+
+				<Form.Item>
+					<Label htmlFor='name'>{t('fields.access-rights')}</Label>
+					<Tags id='guards' />
+				</Form.Item>
+
+				<div className='mt-auto flex justify-between'>
+					<Button
+						color='secondary'
+						variant='label'
+						onClick={prevTabHandler}
+					>
+						<TbChevronLeft />
+						{tg('back')}
+					</Button>
+
+					<Button type='submit' color='success' disabled={loading}>
+						{tg('create')} <CheckIcon />
+					</Button>
+				</div>
+			</Form>
+		</div>
+	)
+}
+
+export { Step4 }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step4/index.ts

@@ -0,0 +1 @@
+export { Step4 } from './Step4'

package/src/components/organisms/DatasetsTable/Creation/Steps/index.ts

@@ -0,0 +1,4 @@
+export { Step1 } from './Step1'
+export { Step2 } from './Step2'
+export { Step3 } from './Step3'
+export { Step4 } from './Step4'

package/src/components/organisms/DatasetsTable/Creation/index.ts

@@ -0,0 +1 @@
+export { DatasetCreation } from './Creation'