marks

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,10 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
+import {
+  HexColorPicker
+} from "react-colorful";
 
 import {
   activeLoader,
   deletePersonOnProject,
+  addNewTagToProject,
   filterCreatedByMe,
   filteredExecutorTasks,
   filteredParticipateTasks,
@@ -51,6 +55,7 @@ import accept from "assets/images/accept.png";
 import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
+
 import { getCorrectDate } from "../../components/Calendar/calendarHelper";
 
 export const ProjectTracker = () => {
@@ -66,6 +71,12 @@ export const ProjectTracker = () => {
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState({});
   const [personListOpen, setPersonListOpen] = useState(false);
+  const [tags, setTags] = useState({
+    open: false,
+    add: false
+  })
+  const [color, setColor] = useState("#aabbcc");
+  const [tagInfo, setTagInfo] = useState({description: '', name: ''})
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
   const [filteredNoTasks, setFilteredNoTasks] = useState(false);
@@ -283,6 +294,33 @@ export const ProjectTracker = () => {
     dispatch(setProjectBoardFetch(projectId.id));
   }
 
+  function addNewTag () {
+    apiRequest("/mark/create", {
+      method: "POST",
+      data: {
+        title: tagInfo.description,
+        slug: tagInfo.name,
+        color: color,
+        status: 1
+      },
+    }).then((data) => {
+      apiRequest("/mark/attach", {
+        method: "POST",
+        data: {
+          mark_id: data.id,
+          entity_type: 1,
+          entity_id: projectId.id
+        }
+      }).then((data) => {
+        dispatch(addNewTagToProject(data.mark))
+        setTags((prevState) => ({
+          ...prevState,
+          add: false
+        }))
+      })
+    })
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -531,6 +569,87 @@ export const ProjectTracker = () => {
                       )}
                     </div>
                   )}
+                  <div className="tasks__head__tags">
+                    <div className='tags__add' onClick={() => {
+                      setTags((prevState) => ({
+                        ...prevState,
+                        open: !tags.open
+                      }))
+                    }}>
+                      <p>Список тегов</p>
+                      <span>+</span>
+                    </div>
+                    {tags.open &&
+                      <div className='tags__list'>
+                        <img src={close} className='close' alt='close' onClick={() => {
+                          setTags((prevState) => ({
+                            ...prevState,
+                            open: false
+                          }))
+                        }} />
+                        {!tags.add &&
+                            <div className='tags__list__created'>
+                              {projectBoard.mark.map((tag) => {
+                                return <div className='tagItem' key={tag.id}>
+                                    <p className='tagItem__description'>
+                                      {tag.title}
+                                    </p>
+                                  <div className='tagItem__info'>
+                                    <span className='tagItem__info__name'>{tag.slug}</span>
+                                    <span className='tagItem__info__color' style={{background: tag.color}}/>
+                                  </div>
+                                  </div>
+                                  })
+                              }
+                              <div className='addNewTag' onClick={() => setTags((prevState) => ({...prevState, add: true}))}>
+                                <p>
+                                  Добавить новый тег
+                                </p>
+                                <span>
+                                +
+                              </span>
+                              </div>
+                            </div>
+                        }
+                        {tags.add &&
+                            <div className='formTag'>
+                              <img src={arrow} className='arrow' alt='arrow' onClick={() => {
+                                setTags((prevState) => ({
+                                  ...prevState,
+                                  add: false
+                                }))
+                              }}/>
+                              <input
+                                  className='formTag__input'
+                                  placeholder='Описание метки'
+                                  maxLength="25"
+                                  value={tagInfo.description}
+                                  onChange={(e) => setTagInfo(prevState => ({
+                                    ...prevState,
+                                    description: e.target.value
+                                  }))}
+                              />
+                              <input
+                                  className='formTag__input'
+                                  placeholder='Тег'
+                                  value={tagInfo.name}
+                                  maxLength="10"
+                                  onChange={(e) => setTagInfo(prevState => ({
+                                    ...prevState,
+                                    name: e.target.value
+                                  }))}
+                              />
+                              <HexColorPicker color={color} onChange={setColor} />
+                              <button
+                                  onClick={addNewTag}
+                                  className={tagInfo.name && tagInfo.description ? 'formTag__btn' : 'formTag__btn disable'}>
+                                Добавить
+                              </button>
+                            </div>
+                        }
+                      </div>
+                    }
+                  </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
                     <p>Вернуться на проекты</p>
                     <img src={arrow} alt="arrow" />