Feature/create project form

package.json

@@ -42,6 +42,7 @@
 		"sass": "^1.70.0",
 		"scss": "^0.2.4",
 		"sharp": "^0.33.2",
+		"uuid": "^10.0.0",
 		"yup": "^1.3.3",
 		"zod": "^3.23.8"
 	},
@@ -53,6 +54,7 @@
 		"@types/react-avatar-editor": "^13.0.3",
 		"@types/react-datepicker": "^6.2.0",
 		"@types/react-dom": "^18",
+		"@types/uuid": "^10.0.0",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"clsx": "^2.1.0",

src/entities/add-proejct-specialists/add-project-speciality.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import styles from './add-specialty.module.scss';
+import { LEVEL } from '@/utils/constants';
+import { TProfession, TSkills } from '@/shared/types/specialty';
+import IconPlus from '@/shared/assets/icons/plus-large.svg';
+import { AddSpecialtyProps } from './types';
+import SelectWithSearch from '@/shared/ui/select-search/select-search';
+import {
+	getLevelName,
+	getSkills,
+	transformProfessions,
+} from '@/utils/specialists-functions';
+import { MainButton } from '@/shared/ui';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
+
+import {
+	useForm,
+	Controller,
+} from 'react-hook-form';
+
+export const AddProjectSpeciality: React.FC<AddSpecialtyProps> = ({
+	professions,
+	allSkills,
+	handleAddSpecialty,
+}) => {
+	const { control, handleSubmit, reset, watch } = useForm({
+		mode: 'onChange',
+	});
+
+	// Watching form fields for real-time values
+	const selectedProfession = watch('profession');
+	const selectedLevel = watch('level');
+	const selectedSkills = watch('skills');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const onSubmit: any = (data: {
+		profession: TProfession;
+		level: number;
+		skills: TSkills[];
+	}) => {
+		const { profession, level, skills } = data;
+		handleAddSpecialty({
+			profession,
+			level,
+			skills,
+		});
+		reset({
+			profession: null,
+			level: null,
+			skills: [],
+		});
+	};
+
+	const handleResetForm = () => {
+		reset({
+			profession: null,
+			level: null,
+			skills: [],
+		});
+	};
+
+	// Utilizing the watched values for field validation
+	const isFieldsNotFill = () => {
+		return (
+			selectedProfession === null ||
+			selectedLevel === null ||
+			selectedSkills?.length === 0
+		);
+	};
+
+	interface MultiSelectItem {
+		label: string;
+		value: number; // Adjust based on your actual value type
+	}
+
+	return (
+		<div className={styles.addSpecialty}>
+			<Controller
+				name="profession"
+				control={control}
+				rules={{ required: true }}
+				render={({ field }) => (
+					<SelectWithSearch
+						label="Специальность"
+						options={transformProfessions(professions)}
+						selectedValue={field.value?.specialization as unknown as string}
+						onValueChange={(value) =>
+							field.onChange(
+								professions.find((p) => p.specialization === value)
+							)
+						}
+					/>
+				)}
+			/>
+
+			<Controller
+				name="level"
+				control={control}
+				rules={{ required: true }}
+				render={({ field }) => (
+					<SelectWithSearch
+						label="Уровень квалификации"
+						options={LEVEL}
+						selectedValue={getLevelName(field.value)}
+						onValueChange={(value) =>
+							field.onChange(
+								LEVEL.find((lvl) => lvl.value === value)?.level as number
+							)
+						}
+					/>
+				)}
+			/>
+
+			<Controller
+				name="skills"
+				control={control}
+				rules={{ validate: (value) => value.length > 0 }}
+				render={({ field }) => (
+					<MultiSelectInput
+						width="100%"
+						name="select-skills"
+						label="Навыки"
+						description="Выберите не более 15 навыков"
+						maxSelections={15}
+						isSearchable
+						options={getSkills(allSkills)}
+						values={getSkills(field.value)}
+						onChange={(item: MultiSelectItem[]) =>
+							field.onChange(
+								item.map(({ label, value }) => ({
+									name: label,
+									id: value,
+								}))
+							)
+						}
+					/>
+				)}
+			/>
+
+			<div className={styles.addSpecialty__buttons}>
+				<MainButton
+					IconLeft={IconPlus}
+					variant="secondary"
+					width="regular"
+					onClick={handleSubmit(onSubmit)}
+					type="button"
+					disabled={isFieldsNotFill()}>
+					Добавить
+				</MainButton>
+
+				<MainButton
+					className={styles.addSpecialty__resetButton}
+					type="reset"
+					variant="trivial"
+					onClick={handleResetForm}
+					width="min">
+					Сбросить
+				</MainButton>
+			</div>
+		</div>
+	);
+};

src/shared/ui/add-specialty/add-specialty.module.scss → src/entities/add-proejct-specialists/add-specialty.module.scss

@@ -1,4 +1,4 @@
-@import '../../../shared//style/variables.scss';
+@import '@/shared//style/variables.scss';
 
 .addSpecialty {
 	width: 100%;

src/entities/add-specialists/add-specialty.module.scss

@@ -0,0 +1,27 @@
+@import 'src/shared//style/variables.scss';
+
+.addSpecialty {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: row;
+		margin-top: 16px;
+	}
+	&__resetButton {
+		cursor: pointer;
+		background: none;
+		padding: 0;
+		color: $--bg-accent-default;
+		font-family: $--open-sans-font;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+		letter-spacing: 0.25px;
+		border: none;
+	}
+}

src/shared/ui/add-specialty/add-specialty.tsx → src/entities/add-specialists/add-specialty.tsx

@@ -1,13 +1,18 @@
 import React, { FormEvent, useEffect, useState } from 'react';
 import styles from './add-specialty.module.scss';
-import SelectWithSearch from '../select-search/select-search';
-import { MultiSelectInput } from '../multi-select-input/multi-select-input';
+import SelectWithSearch from '@/shared/ui/select-search/select-search';
+import { MultiSelectInput } from '@/shared/ui/multi-select-input/multi-select-input';
 import { LEVEL } from '@/utils/constants';
 import { TProfession, TSkills } from '@/shared/types/specialty';
-import { AddSpecialtyProps } from './types';
 import { Option } from '@/shared/types/option';
-import { MainButton } from '../main-button/main-button';
 import IconPlus from '@/shared/assets/icons/plus-large.svg';
+import {
+	getLevelName,
+	getSkills,
+	transformProfessions,
+} from '../../utils/specialists-functions';
+import { AddSpecialtyProps } from './types';
+import { MainButton } from '@/shared/ui';
 
 export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 	professions,
@@ -20,13 +25,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 	const [selectedLevel, setSelectedLevel] = useState<number | null>(null);
 	const [skills, setSkills] = useState<TSkills[]>([]);
 
-	const transformProfessions = (profList: TProfession[]) => {
-		return profList?.map(({ id, specialization }) => ({
-			label: specialization,
-			value: specialization,
-			id,
-		}));
-	};
 	const handleProfessionChange = (value: string) => {
 		setProfession(
 			professions.find(
@@ -39,14 +37,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 			LEVEL.find((element) => element.value === value)?.level as number
 		); // обновляем состояние выбранного значения
 	};
-
-	const getSkills = (skills: TSkills[]) => {
-		return skills.map(({ id, name }) => ({
-			label: name,
-			value: id,
-		}));
-	};
-
 	const editSkills = (skills: Option[]) => {
 		setSkills(
 			skills.map(({ label, value }) => ({
@@ -55,11 +45,6 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 			}))
 		);
 	};
-	const getLevelName = (level: number) => {
-		if (level > 0 && level < 5) {
-			return LEVEL[level - 1].value;
-		} else return '';
-	};
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
@@ -76,7 +61,7 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 		setSelectedLevel(null);
 	};
 	const isFieldsNotFill = () => {
-		return (profession === null || selectedLevel === null || skills.length === 0);
+		return profession === null || selectedLevel === null || skills.length === 0;
 	};
 	useEffect(() => {
 		if (isSuccessAddSpecialty) handleResetForm();
@@ -108,8 +93,8 @@ export const AddSpecialty: React.FC<AddSpecialtyProps> = ({
 				isSearchable
 				options={getSkills(allSkills)}
 				values={getSkills(skills)}
-				onChange={(item) => {
-					editSkills(item as Option[]);
+				onChange={(item: Option[]) => {
+					editSkills(item);
 				}}
 			/>
 			<div className={styles.addSpecialty__buttons}>

src/entities/add-specialists/types.ts

@@ -0,0 +1,9 @@
+import { TProfession, TSkills, TSpeciality } from '@/shared/types/specialty';
+
+export type AddSpecialtyProps = {
+	professions: TProfession[];
+	allSkills: TSkills[];
+	isLoadingAddSpecialty: boolean;
+	handleAddSpecialty: (data: TSpeciality) => void;
+	isSuccessAddSpecialty: boolean;
+};