fix: github fix test stand (#164)

Lapkipomoshi · Aug 21, 2023 · e8454ef · e8454ef
1 parent 4c47425
commit e8454ef
Show file tree

Hide file tree

Showing 21 changed files with 610 additions and 48 deletions.
diff --git a/src/components/VacancyCard/VacancyCard.jsx b/src/components/VacancyCard/VacancyCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useOutletContext } from 'react-router-dom';
 import './VacancyCard.scss';
-import EditPenIcon from '../../images/EditPenIcon/EditPenIcon';
+import EditIcon from '../../images/EditIcon/EditIcon';
 import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 
 const VacancyCard = ({ title, salary, schedule, description, education, isLoading }) => {
@@ -18,9 +18,9 @@ const VacancyCard = ({ title, salary, schedule, description, education, isLoadin
 
         {isOwner && (
           <>
-            {/* TODO  <EditPenIcon /> функционал реализую в след PR */}
+            {/* TODO  <EditIcon /> функционал реализую в след PR */}
             <button type='button' className='vacancy-card__icon-button vacancy-card__icon-button_edit'>
-              <EditPenIcon />
+              <EditIcon />
             </button>
             {/* TODO DeleteIcon функционал реализую в след PR */}
             <button type='button' className='vacancy-card__icon-button vacancy-card__title-button_delete'>

diff --git a/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss b/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss
@@ -20,6 +20,4 @@
 
 .vacancy-card__title-button_delete {
   color: #f0924f;
-  margin-left: 8px;
-  font-size: 22.3px;
 }
diff --git a/src/images/EditPenIcon/EditPenIcon.jsx → src/images/EditIcon/EditIcon.jsx b/src/images/EditPenIcon/EditPenIcon.jsx → src/images/EditIcon/EditIcon.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import './EditPenIcon.scss';
+import './EditIcon.scss';
 
-const EditPenIcon = () => {
+const EditIcon = () => {
   return (
     <svg className='edit-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49' fill='none'>
       <path
@@ -16,4 +16,4 @@ const EditPenIcon = () => {
   );
 };
 
-export default EditPenIcon;
+export default EditIcon;
diff --git a/src/images/EditPenIcon/EditPenIcon.scss → src/images/EditIcon/EditIcon.scss b/src/images/EditPenIcon/EditPenIcon.scss → src/images/EditIcon/EditIcon.scss
diff --git a/src/modules/AboutShelter/AboutShelter.jsx b/src/modules/AboutShelter/AboutShelter.jsx
@@ -5,7 +5,7 @@ import InfoItem from '../../ui/InfoItem/InfoItem';
 import classmatesIcon from '../../images/icons/footer__icon_classmates.svg';
 import vkIcon from '../../images/icons/footer__icon_vk.svg';
 import telegramIcon from '../../images/icons/footer__icon_telegram.svg';
-import EditPenIcon from '../../images/EditPenIcon/EditPenIcon';
+import EditIcon from '../../images/EditIcon/EditIcon';
 import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 import ShelterOwnerStatistics from '../ShelterOwnerStatistics/ShelterOwnerStatistics';
 
@@ -34,7 +34,7 @@ const AboutShelter = () => {
               <>
                 {/* TODO  <EditPenIcon /> ведет на 6.2.1.4 в фигме, оно пока не реализовано */}
                 <Link to='/' className='about-shelter__icon-button about-shelter__icon-button_edit'>
-                  <EditPenIcon />
+                  <EditIcon />
                 </Link>
                 {/* TODO  при нажатии попап как на 6.2.1.3 в фигме, попап не сверстан */}
                 <button type='button' className='about-shelter__icon-button about-shelter__title-button_delete'>

diff --git a/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss b/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss
@@ -19,6 +19,6 @@
 }
 
 .about-shelter__title-button_delete {
-  color: #d83e3e;
+  color: var(--color-verify-invalid);
   margin-left: 8px;
 }
diff --git a/src/modules/ShelterVacancies/AddVacancyForm/AddVacancyForm.jsx b/src/modules/ShelterVacancies/AddVacancyForm/AddVacancyForm.jsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import './AddVacancyForm.scss';
+import Button from '../../../ui/Button/Button';
+import useInput from '../../../hooks/useInput';
+import DeclarationInput from '../../../ui/DeclarationInput/DeclarationInput';
+import Select from '../../../ui/Select/Select';
+import * as regex from '../../../utils/regex';
+import * as errorMessage from '../../../utils/errorMessage';
+
+const AddVacancyForm = () => {
+  const [formValues, setFormValues] = useState({
+    schedule: [],
+    salary: null,
+    education: '',
+    is_ndfl: '',
+    description: '',
+    position: '',
+  });
+
+  const vacancyName = useInput('', { notEmpty: true, maxLength: 30, regex: regex.NAME_REGEX }, errorMessage.VACANCY_NAME);
+  const vacancySalary = useInput('', { notEmpty: true, maxLength: 12, regex: regex.NUMBER }, errorMessage.VACANCY_SALARY);
+  const vacancyDescription = useInput('', { notEmpty: true, maxLength: 3000, regex: regex.TEXT }, errorMessage.VACANCY_DESCRIPTION);
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleChangeCheckbox = () => {
+    setIsChecked(!isChecked);
+  };
+
+  const isFormButtonDisabled =
+    vacancyName.invalidText ||
+    vacancySalary.invalidText ||
+    vacancyDescription.invalidText ||
+    !isChecked ||
+    formValues.education.length !== 0 ||
+    formValues.schedule.length === 0;
+
+  // TODO написать api для отправки формы в след PR
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    console.log('submit');
+  };
+
+  const handleDesctiptionChange = (evt) => {
+    vacancyDescription.onChange(evt);
+
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        description: evt.target.value,
+      };
+    });
+  };
+
+  useEffect(() => {
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        salary: vacancySalary.value,
+        position: vacancyName.value,
+      };
+    });
+  }, [vacancySalary.value, vacancyName.value]);
+
+  const handleSelectChange = (id, selected) => {
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        [id]: selected,
+      };
+    });
+  };
+
+  // TODO бэк сказал сделал эндпоинты для селектов, пока замокала, в след PR
+  const shiftItems = [
+    { label: 'Полный день', id: 'slug1' },
+    { label: 'Сменный', id: 'slug2' },
+    { label: 'Гибкий', id: 'slug3' },
+    { label: 'Удаленная работа', id: 'slug4' },
+  ];
+
+  const salaryItems = [
+    { label: 'На руки', id: '11' },
+    { label: 'с НДФЛ', id: '22' },
+  ];
+
+  const educationItems = [
+    { label: 'Не требуется', id: '111' },
+    { label: 'Среднее специальное', id: '222' },
+    { label: 'Высшее', id: '333' },
+  ];
+
+  return (
+    <form className='add-vacancy-form__container' onSubmit={handleSubmit}>
+      <DeclarationInput caption='Название вакансии*' inputState={vacancyName} type='text' name='vacancyName' required />
+
+      <div className='add-vacancy-form__flex-container'>
+        <DeclarationInput caption='Заработная плата*' inputState={vacancySalary} type='number' name='vacancySalary' required placeholder='₽' />
+
+        <Select label='Тип оплаты*' onChange={handleSelectChange} options={salaryItems} isMulti={false} required />
+      </div>
+
+      <div className='add-vacancy-form__flex-container'>
+        <Select label='График работы*' onChange={handleSelectChange} options={shiftItems} id='schedule' isMulti required />
+
+        <Select label='Образование*' onChange={handleSelectChange} options={educationItems} isMulti={false} required />
+      </div>
+
+      <p className='add-vacancy-form__desctioption-title'>Обязанности*</p>
+      <textarea
+        className={`add-vacancy-form__description ${vacancyDescription.dirty && vacancyDescription.invalidText && 'add-vacancy-form__textarea_invalid'}`}
+        value={vacancyDescription.value}
+        onChange={handleDesctiptionChange}
+        onBlur={vacancyDescription.onBlur}
+        name='description'
+        required
+      />
+      <p className='add-shelter-form__error'>{vacancyDescription.dirty && vacancyDescription.invalidText}</p>
+
+      {/* TODO вынести соглашение в отдельный компонент, используется еще в 2х местах, это взято ShelterStep */}
+      <div className='register__privacy'>
+        {/* TODO этот checkbox уже на макете выглядит по другому, поменять везде */}
+        <label className='checkbox__container'>
+          <input className='checkbox__input' type='checkbox' onClick={handleChangeCheckbox} />
+          <span className='checkbox' />
+        </label>
+
+        <p className='register__text standard-font standard-font_type_small'>
+          Я согласен с{' '}
+          <Link className='register__link standard-font standard-font_type_small' to='/privacy' target='_blank'>
+            Политикой конфиденциальности
+          </Link>{' '}
+          и{' '}
+          <Link className='register__link standard-font standard-font_type_small' to='/terms' target='_blank'>
+            Условиями использования сервиса
+          </Link>
+        </p>
+      </div>
+
+      <div className='add-shelter-form__submit-buttons'>
+        <Button submit disabled={isFormButtonDisabled}>
+          Добавить вакансию
+        </Button>
+
+        {/* TODO добавить логику кнопки Отменить, она стирает все значения и убирает рендеринг формы */}
+        <Button>Отменить</Button>
+      </div>
+    </form>
+  );
+};
+
+export default AddVacancyForm;
diff --git a/src/modules/ShelterVacancies/AddVacancyForm/AddVacancyForm.scss b/src/modules/ShelterVacancies/AddVacancyForm/AddVacancyForm.scss
@@ -0,0 +1,39 @@
+.add-vacancy-form__flex-container {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+}
+
+.add-vacancy-form__container {
+  margin-top: 36px;
+  width: 576px;
+}
+
+.add-shelter-form__submit-buttons {
+  display: flex;
+  gap: 32px;
+  margin-top: 40px;
+}
+
+.add-vacancy-form__description {
+  width: 100%;
+  height: 120px;
+  margin: 0;
+  padding: 16px 10.5px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 400;
+  background-color: var(--color-background-additional);
+  border: 1px solid var(--color-text-additional);
+  border-radius: 8px;
+  box-sizing: border-box;
+  resize: none;
+
+  &_invalid {
+    border-color: var(--color-verify-invalid);
+  }
+}
+
+.add-vacancy-form__desctioption-title {
+  margin-bottom: 10px;
+}
diff --git a/src/modules/ShelterVacancies/ShelterVacancies.jsx b/src/modules/ShelterVacancies/ShelterVacancies.jsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import './ShelterVacancies.scss';
-import VacancyCard from '../../components/VacancyCard/VacancyCard';
+import VacancyList from './VacancyList';
 import Button from '../../ui/Button/Button';
+import AddVacancyForm from './AddVacancyForm/AddVacancyForm';
 import shelterVacanciesApi from './api';
 
 const ShelterVacancies = () => {
@@ -25,35 +26,23 @@ const ShelterVacancies = () => {
       });
   }, [shelter.id]);
 
-  const hasVacancies = vacanciesList.length !== 0;
+  if (isLoading) {
+    return null;
+  }
 
   return (
     <section className='shelter-vacancies'>
       <div className='shelter-vacancies__title-container'>
         <h2 className='shelter-vacancies__title standard-font standard-font_type_h2'>Вакансии приюта «{shelter.name}»</h2>
+
+        {/* TODO добавить логику disabled кнопки */}
         <Button>Добавить вакансию</Button>
       </div>
       <h3 className='standard-font_type_h3 shelter-section__subtitle'>Всего вакансий: {vacanciesList.length}</h3>
-      <ul className='vacancies-list'>
-        {hasVacancies ? (
-          vacanciesList.map((card) => {
-            return (
-              <VacancyCard
-                isLoading={isLoading}
-                key={card.id}
-                id={card.id}
-                education={card.education}
-                title={card.position}
-                salary={card.salary}
-                schedule={card.schedule}
-                description={card.description}
-              />
-            );
-          })
-        ) : (
-          <p>У приюта нет активных вакансий</p>
-        )}
-      </ul>
+      <div className='shelter-vacancies__vacancies-container'>
+        <VacancyList vacancies={vacanciesList} isLoading={isLoading} />
+        <AddVacancyForm />
+      </div>
     </section>
   );
 };

diff --git a/src/modules/ShelterVacancies/ShelterVacancies.scss b/src/modules/ShelterVacancies/ShelterVacancies.scss
@@ -1,10 +1,17 @@
-.vacancies-list {
+.shelter__vacancies-list {
   display: flex;
   margin: 36px 0 0;
   padding: 0;
   flex-direction: column;
   row-gap: 32px;
   list-style-type: none;
+  width: 437px;
+}
+
+.shelter__empty-list {
+  margin: 36px 0 0;
+  padding: 0;
+  width: 437px;
 }
 
 .shelter-section__subtitle {
@@ -27,3 +34,8 @@
   padding: 0 132px 80px;
   box-sizing: border-box;
 }
+
+.shelter-vacancies__vacancies-container {
+  display: flex;
+  gap: 63px;
+}
diff --git a/src/modules/ShelterVacancies/VacancyList.jsx b/src/modules/ShelterVacancies/VacancyList.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import VacancyCard from '../../components/VacancyCard/VacancyCard';
+import './ShelterVacancies.scss';
+
+const VacancyList = ({ vacancies, isLoading }) => {
+  if (!vacancies.length) {
+    return <p className='standard-font shelter__empty-list'>У приюта нет активных вакансий</p>;
+  }
+
+  return (
+    <ul className='shelter__vacancies-list'>
+      {vacancies.map((card) => {
+        return (
+          <VacancyCard
+            isLoading={isLoading}
+            key={card.id}
+            id={card.id}
+            education={card.education}
+            title={card.position}
+            salary={card.salary}
+            schedule={card.schedule}
+            description={card.description}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default VacancyList;
diff --git a/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css b/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css
@@ -4,4 +4,5 @@
   padding: 0;
   flex-direction: column;
   list-style-type: none;
-}
+  width: 100%;
+}
diff --git a/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css b/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css
@@ -2,4 +2,5 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-}
+  gap: 48px;
+}