bmdl-sdk 1.5.9 → 2.0.1

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'

package/src/components/organisms/DatasetsTable/DatasetsTable.tsx

@@ -0,0 +1,81 @@
+// 'use client'
+
+// import { useEffect, useState } from 'react'
+
+// import { LOADIND_TABLE_PAGINATION, LOADING_TABLE_DATA } from '@/constants'
+
+// import { DataTable } from '@/components/molecules'
+
+// import { IDataQuery } from '@/types'
+
+// import { DatasetCreation } from './Creation'
+// import {
+// 	getDatasetsTableColumns,
+// 	getDatasetsTableData
+// } from './DatasetsTable.utils'
+// import { getParams } from '@/utils'
+
+// export function DatasetsTable() {
+// 	const columns = getDatasetsTableColumns()
+// 	//
+// 	// const [defaultData, setDefaultData] = useState<GetDataInput>({
+// 	// 	sort: [{ column: 'createdAt', order: 'desc' }]
+// 	// })
+// 	// //
+// 	// const [getDatasets, { data, loading, called, refetch }] =
+// 	// 	useGetDatasetsLazyQuery()
+// 	// //
+// 	// useEffect(() => {
+// 	// 	const { q, sort, filter, page, limit }: IDataQuery = getParams()
+// 	// 	//
+// 	// 	const newState = {
+// 	// 		...defaultData,
+// 	// 		...(q && { q }),
+// 	// 		...(sort && { sort: JSON.parse(sort) }),
+// 	// 		...(filter && { filter: JSON.parse(filter) }),
+// 	// 		...(page && { page: +page }),
+// 	// 		...(limit && { limit: +limit })
+// 	// 	}
+// 	// 	//
+// 	// 	setDefaultData(newState)
+// 	// 	//
+// 	// 	getDatasets({
+// 	// 		variables: { data: newState }
+// 	// 	})
+// 	// }, [])
+// 	// //
+// 	// const getData = (data: Record<string, any>) => {
+// 	// 	const newState = {
+// 	// 		...defaultData,
+// 	// 		...data
+// 	// 	}
+// 	// 	//
+// 	// 	setDefaultData(newState)
+// 	// 	//
+// 	// 	refetch({
+// 	// 		data: newState
+// 	// 	})
+// 	// }
+// 	//
+// 	return (
+// 		<>DataTable
+// 			{/* <DataTable
+// 				creation={<DatasetCreation />}
+// 				columns={columns}
+// 				dataSource={getDatasetsTableData(
+// 					data?.getDatasets.data || LOADING_TABLE_DATA,
+// 					!called || loading
+// 				)}
+// 				pagination={
+// 					data?.getDatasets.pagination || LOADIND_TABLE_PAGINATION
+// 				}
+// 				getData={getData}
+// 				filterQuery={{
+// 					querykey: 'getDatasetFilter',
+// 					queryFn: useGetDatasetFilterQuery
+// 				}}
+// 				listName='datasets'
+// 			/> */}
+// 		</>
+// 	)
+// }

package/src/components/organisms/DatasetsTable/DatasetsTable.utils.tsx

@@ -0,0 +1,125 @@
+// import { useTranslations } from 'next-intl'
+
+// import { DatasetModel } from '@/graphql'
+
+// import { Date, Skeleton, Typography } from '@/components/atoms'
+
+// import { ProfileCard } from '@/components/molecules'
+// import {
+// 	Name,
+// 	SkeletonConnects,
+// 	SkeletonDate,
+// 	SkeletonIcon,
+// 	SkeletonProfile
+// } from '@/components/molecules/DataTable'
+
+// import { DatasetsTableDataItem } from '@/types'
+
+// import { Source } from './Source'
+// import { Status } from './Status'
+// import { Type } from './Type'
+
+// const { Text } = Typography
+// //
+// export function getDatasetsTableData(
+// 	dataSource: DatasetModel[],
+// 	isLoading: boolean
+// ): DatasetsTableDataItem[] {
+// 	if (isLoading) {
+// 		return dataSource.map(dataItem => ({
+// 			...dataItem,
+// 			type: <SkeletonIcon />,
+// 			name: <Skeleton className='h-5 w-80' />,
+// 			items: <Skeleton className='h-5 w-16' />,
+// 			connects: <SkeletonConnects />,
+// 			source: <SkeletonIcon />,
+// 			author: <SkeletonProfile />,
+// 			createdAt: <SkeletonDate />,
+// 			editedAt: <SkeletonDate />,
+// 			updatedAt: <SkeletonDate />,
+// 			status: <Skeleton circle className='size-7.5' />
+// 		}))
+// 	}
+// 	//
+// 	return dataSource.map(dataItem => ({
+// 		id: dataItem.id,
+// 		type: <Type type={dataItem.type} />,
+// 		name: <Name name={dataItem.name} href={`/datasets/${dataItem.id}`} />,
+// 		items: <Text>{dataItem.total?.toLocaleString()}</Text>,
+// 		connects: <Text>{dataItem._count?.widgets?.toLocaleString()}</Text>,
+// 		source: <Source source={dataItem.source || dataItem.file!} />,
+// 		author: <ProfileCard user={dataItem.author} size={'sm'} />,
+// 		createdAt: <Date date={dataItem.createdAt} />,
+// 		editedAt: <Date date={dataItem.editedAt} />,
+// 		updatedAt: <Date date={dataItem.updatedAt} />,
+// 		status: <Status status={dataItem.status} />
+// 	}))
+// }
+
+// ////////////
+
+// export function getDatasetsTableColumns() {
+// 	const t = useTranslations('datasets.columns')
+// 	//
+// 	return [
+// 		{
+// 			key: 'type',
+// 			title: t('type'),
+// 			sort: 'string',
+// 			width: 120
+// 		},
+// 		{
+// 			key: 'name',
+// 			title: t('name'),
+// 			sort: 'string',
+// 			width: 300
+// 		},
+// 		{
+// 			key: 'items',
+// 			title: t('items'),
+// 			sort: 'number',
+// 			width: 120
+// 		},
+// 		{
+// 			key: 'connects',
+// 			title: t('connects'),
+// 			sort: 'number',
+// 			width: 120
+// 		},
+// 		{
+// 			key: 'source',
+// 			title: t('source'),
+// 			sort: 'string',
+// 			width: 140
+// 		},
+// 		{
+// 			key: 'author',
+// 			title: t('author'),
+// 			sort: 'string',
+// 			width: 250
+// 		},
+// 		{
+// 			key: 'createdAt',
+// 			title: t('created'),
+// 			sort: 'date',
+// 			width: 170
+// 		},
+// 		{
+// 			key: 'editedAt',
+// 			title: t('edited'),
+// 			sort: 'date',
+// 			width: 170
+// 		},
+// 		{
+// 			key: 'updatedAt',
+// 			title: t('updated'),
+// 			sort: 'date',
+// 			width: 17
+// 		},
+// 		{
+// 			key: 'status',
+// 			title: t('status'),
+// 			sort: 'string'
+// 		}
+// 	]
+// }

package/src/components/organisms/DatasetsTable/Source/Source.styles.ts

@@ -0,0 +1,7 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'inline-block w-5.5',
+	text: 'align-middle',
+	childs: '[&_svg]:size-5.5'
+})

package/src/components/organisms/DatasetsTable/Source/Source.tsx

@@ -0,0 +1,39 @@
+import { useTranslations } from 'next-intl'
+import { type ComponentProps } from 'react'
+
+import { FileModel, SourceModel } from '@/graphql'
+
+import { Tooltip, Typography } from '@/components/atoms'
+
+import { rootStyles } from './Source.styles'
+
+import { getSourceIcon, getSourceType } from './Source.utils'
+
+const { Text } = Typography
+
+type SourceProps = ComponentProps<'span'> & {
+	source?: SourceModel | FileModel
+}
+
+function Source({ source }: SourceProps) {
+	const t = useTranslations('datasets.source')
+	//
+	const sourceType = getSourceType(source!)
+	//
+	const Icon = getSourceIcon(sourceType)
+	//
+	return (
+		<Tooltip
+			title={t(sourceType, {
+				name: (source as FileModel).originalName || source!.name
+			})}
+			side='left'
+		>
+			<Text className={rootStyles}>
+				<Icon />
+			</Text>
+		</Tooltip>
+	)
+}
+
+export { Source }