Merge pull request #139 from apuc/tracker-mark

Tracker mark

package-lock.json

@@ -26,6 +26,7 @@
         "react": "^18.2.0",
         "react-app-polyfill": "^2.0.0",
         "react-bootstrap": "^1.6.0",
+        "react-colorful": "^5.6.1",
         "react-datepicker": "^4.10.0",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.2.0",
@@ -20725,6 +20726,15 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-datepicker": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^2.0.0",
     "react-bootstrap": "^1.6.0",
+    "react-colorful": "^5.6.1",
     "react-datepicker": "^4.10.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -30,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
 import fullScreen from "assets/icons/arrows/inFullScreen.svg";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import category from "assets/icons/category.svg";
 import close from "assets/icons/closeProjectPersons.svg";
@@ -54,6 +55,7 @@ export const ModalTiсket = ({
   projectName,
   projectUsers,
   projectOwnerId,
+  projectMarks,
 }) => {
   const dispatch = useDispatch();
   const [addSubtask, setAddSubtask] = useState(false);
@@ -73,6 +75,7 @@ export const ModalTiсket = ({
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
   const [members, setMembers] = useState(task.taskUsers);
+  const [taskTags, setTaskTags] = useState(task.mark);
   const [users, setUsers] = useState([]);
   const [timerStart, setTimerStart] = useState(false);
   const [timerInfo, setTimerInfo] = useState({});
@@ -85,9 +88,11 @@ export const ModalTiсket = ({
   const [timerId, setTimerId] = useState(null);
   const [taskFiles, setTaskFiles] = useState([]);
   const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
+  const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const [executorId, setExecutorId] = useState(task.executor_id);
   const profileInfo = useSelector(getProfileInfo);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
+  const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const { showNotification } = useNotification();
 
   function deleteTask() {
@@ -347,6 +352,16 @@ export const ModalTiсket = ({
     }
   }, []);
 
+  useEffect(() => {
+    let tagIds = taskTags.map((tag) => tag.id);
+    setCorrectProjectTags(
+      projectMarks.reduce((acc, cur) => {
+        if (!tagIds.includes(cur.id)) acc.push(cur);
+        return acc;
+      }, [])
+    );
+  }, [taskTags]);
+
   async function handleUpload(event) {
     const formData = new FormData();
     formData.append("uploadFile", event.target.files[0]);
@@ -454,6 +469,35 @@ export const ModalTiсket = ({
     });
   }
 
+  function addTagToTask(tagId) {
+    apiRequest("/mark/attach", {
+      method: "POST",
+      data: {
+        mark_id: tagId,
+        entity_type: 2,
+        entity_id: task.id,
+      },
+    }).then((data) => {
+      setSelectTagsOpen(false);
+      setTaskTags((prevValue) => [...prevValue, data.mark]);
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
+  function deleteTagFromTask(tagId) {
+    apiRequest("/mark/detach", {
+      method: "DELETE",
+      data: {
+        mark_id: tagId,
+        entity_type: 2,
+        entity_id: task.id,
+      },
+    }).then(() => {
+      setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId));
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   function closeAcceptModal() {
     setAcceptModalOpen(false);
   }
@@ -478,7 +522,6 @@ export const ModalTiсket = ({
               <img src={fullScreen}></img>
             </Link>
           </h3>
-
           <div className="content__task">
             {editOpen ? (
               <input
@@ -813,6 +856,63 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-bottom">
+            <div className="tags">
+              <div className="tags__selected">
+                {taskTags.map((tag) => {
+                  return (
+                    <div
+                      className="tags__selected__item"
+                      key={tag.id}
+                      style={{ background: tag.color }}
+                    >
+                      <p>{tag.slug}</p>
+                      <img
+                        src={close}
+                        className="delete"
+                        alt="delete"
+                        onClick={() => deleteTagFromTask(tag.id)}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+              <div
+                className="tags__select"
+                onClick={() => setSelectTagsOpen(!selectTagsOpen)}
+              >
+                <span>Выберите тег</span>
+                <img
+                  className={selectTagsOpen ? "open" : ""}
+                  src={arrowDown}
+                  alt="arrow"
+                />
+              </div>
+              {selectTagsOpen && (
+                <div className="tags__dropDown">
+                  <img
+                    onClick={() => setSelectTagsOpen(false)}
+                    className="tags__dropDown__close"
+                    src={close}
+                    alt="close"
+                  />
+                  {correctProjectTags.map((tag) => {
+                    return (
+                      <div
+                        className="tagItem"
+                        key={tag.id}
+                        onClick={() => addTagToTask(tag.id)}
+                      >
+                        <p>{tag.slug}</p>
+                        <span style={{ background: tag.color }} />
+                      </div>
+                    );
+                  })}
+                  {!Boolean(correctProjectTags.length) && (
+                    <p className="tags__dropDown__noItem">Нет тегов</p>
+                  )}
+                </div>
+              )}
+            </div>
             <div
               className={editOpen ? "edit" : ""}
               onClick={() => {

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -971,7 +971,7 @@
       }
 
       &-bottom {
-        padding: 20px 110px 35px 56px;
+        padding: 10px 110px 15px 56px;
         font-weight: 400;
         font-size: 14px;
         line-height: 38px;
@@ -991,6 +991,129 @@
           }
         }
 
+        .tags {
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          row-gap: 5px;
+          padding: 5px;
+          border-radius: 10px;
+          border: 1px solid #e0e0e0;
+          margin-bottom: 10px;
+
+          &__selected {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0;
+            width: 100%;
+            gap: 8px;
+            max-width: 200px;
+
+            &__item {
+              display: flex;
+              padding: 3px 5px 3px 8px;
+              border-radius: 8px;
+              align-items: center;
+              column-gap: 8px;
+              cursor: default;
+
+              p {
+                font-weight: 600;
+                text-decoration: none !important;
+                font-size: 15px;
+                margin: 0;
+                line-height: 15px;
+                color: white;
+              }
+
+              .delete {
+                cursor: pointer;
+                width: 12px;
+                height: 12px;
+              }
+            }
+          }
+
+          &__select {
+            width: 100%;
+            height: 25px;
+            border-radius: 8px;
+            border: 1px solid gray;
+            padding: 5px 8px;
+            display: flex;
+            justify-content: space-between;
+
+            span {
+              font-size: 14px;
+              color: black;
+            }
+
+            img {
+              transition: all 0.3s ease;
+            }
+
+            .open {
+              transform: rotate(180deg);
+            }
+          }
+
+          &__dropDown {
+            position: absolute;
+            padding: 15px 10px 10px;
+            background: white;
+            width: 100%;
+            border-radius: 8px;
+            border: 1px solid #e4e4e4;
+            top: 110%;
+            display: flex;
+            flex-direction: column;
+            row-gap: 4px;
+            z-index: 10;
+
+            &__close {
+              width: 8px;
+              height: 8px;
+              position: absolute;
+              right: 8px;
+              top: 5px;
+            }
+
+            .tagItem {
+              display: flex;
+              width: 100%;
+              cursor: pointer;
+              column-gap: 8px;
+              padding: 5px;
+              border: 1px solid #ececec;
+              border-radius: 8px;
+              justify-content: space-between;
+
+              p {
+                font-size: 18px;
+                font-weight: 500;
+                margin: 0;
+                line-height: 20px;
+                text-decoration: none;
+              }
+
+              span {
+                width: 18px;
+                height: 18px;
+                border-radius: 50px;
+              }
+            }
+
+            &__noItem {
+              line-height: 20px;
+              font-size: 15px;
+              margin: 0;
+              font-weight: 500;
+              text-decoration: none !important;
+              cursor: default;
+            }
+          }
+        }
+
         .edit {
           background: #52b709;
           border-radius: 50px;

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
+import { HexColorPicker } from "react-colorful";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
 import {
   activeLoader,
+  addNewTagToProject,
   deletePersonOnProject,
+  deleteTagProject,
   filterCreatedByMe,
   filteredExecutorTasks,
   filteredParticipateTasks,
@@ -66,6 +69,13 @@ 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,
+    edit: false,
+  });
+  const [color, setColor] = useState("#aabbcc");
+  const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
   const [filteredNoTasks, setFilteredNoTasks] = useState(false);
@@ -283,6 +293,64 @@ 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,
+        }));
+      });
+    });
+  }
+
+  function editTag() {
+    apiRequest("/mark/update", {
+      method: "PUT",
+      data: {
+        mark_id: tagInfo.editMarkId,
+        title: tagInfo.description,
+        slug: tagInfo.name,
+        color: color,
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectId.id));
+      setTags((prevState) => ({
+        ...prevState,
+        edit: false,
+      }));
+    });
+  }
+
+  function deleteTag(tagId) {
+    apiRequest("/mark/detach", {
+      method: "DELETE",
+      data: {
+        mark_id: tagId,
+        entity_type: 1,
+        entity_id: projectId.id,
+      },
+    }).then(() => {
+      dispatch(deleteTagProject(tagId));
+    });
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -531,6 +599,157 @@ 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({
+                              open: false,
+                              add: false,
+                              edit: false,
+                            });
+                            setTagInfo({
+                              description: "",
+                              name: "",
+                            });
+                            setColor("#aabbcc");
+                          }}
+                        />
+                        {!tags.add && !tags.edit && (
+                          <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 className="tagItem__images">
+                                    <img
+                                      src={edit}
+                                      alt="edit"
+                                      onClick={() => {
+                                        setTags((prevState) => ({
+                                          ...prevState,
+                                          edit: true,
+                                        }));
+                                        setTagInfo({
+                                          description: tag.title,
+                                          name: tag.slug,
+                                          editMarkId: tag.id,
+                                        });
+                                        setColor(tag.color);
+                                      }}
+                                    />
+                                    <img
+                                      onClick={() => deleteTag(tag.id)}
+                                      className="delete"
+                                      src={close}
+                                      alt="delete"
+                                    />
+                                  </div>
+                                </div>
+                              );
+                            })}
+                            <div
+                              className="addNewTag"
+                              onClick={() =>
+                                setTags((prevState) => ({
+                                  ...prevState,
+                                  add: true,
+                                }))
+                              }
+                            >
+                              <p>Добавить новый тег</p>
+                              <span>+</span>
+                            </div>
+                          </div>
+                        )}
+                        {(tags.add || tags.edit) && (
+                          <div className="formTag">
+                            <img
+                              src={arrow}
+                              className="arrow"
+                              alt="arrow"
+                              onClick={() => {
+                                setTags((prevState) => ({
+                                  ...prevState,
+                                  add: false,
+                                  edit: false,
+                                }));
+                                setTagInfo({
+                                  description: "",
+                                  name: "",
+                                });
+                                setColor("#aabbcc");
+                              }}
+                            />
+                            <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={() => {
+                                tags.add ? addNewTag() : editTag();
+                              }}
+                              className={
+                                tagInfo.name && tagInfo.description
+                                  ? "formTag__btn"
+                                  : "formTag__btn disable"
+                              }
+                            >
+                              {tags.add ? "Добавить" : "Изменить"}
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
                     <p>Вернуться на проекты</p>
                     <img src={arrow} alt="arrow" />
@@ -547,6 +766,7 @@ export const ProjectTracker = () => {
                   projectName={projectBoard.name}
                   projectUsers={projectBoard.projectUsers}
                   projectOwnerId={projectBoard.owner_id}
+                  projectMarks={projectBoard.mark}
                 />
               )}
 
@@ -679,6 +899,21 @@ export const ProjectTracker = () => {
                                     />
                                   )}
                                 </div>
+                                {Boolean(task.mark.length) && (
+                                  <div className="tasks__board__item__tags">
+                                    {task.mark.map((tag) => {
+                                      return (
+                                        <div
+                                          className="tagItem"
+                                          key={tag.id}
+                                          style={{ background: tag.color }}
+                                        >
+                                          <p>{tag.slug}</p>
+                                        </div>
+                                      );
+                                    })}
+                                  </div>
+                                )}
                                 {task.dead_line && (
                                   <div className="tasks__board__item__deadLine">
                                     <p>Срок исполнения:</p>

src/pages/Tracker/tracker.scss

@@ -236,7 +236,7 @@
 
           &__wrapper {
             display: flex;
-            max-width: 1280px;
+            max-width: 1400px;
             width: 100%;
             margin: 0 auto;
             justify-content: space-between;
@@ -386,7 +386,7 @@
 
             .persons__list {
               position: absolute;
-              z-index: 20;
+              z-index: 8;
               display: flex;
               flex-direction: column;
               background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
@@ -746,6 +746,181 @@
               display: none;
             }
           }
+
+          &__tags {
+            position: relative;
+            .tags {
+              &__add {
+                display: flex;
+                align-items: center;
+                margin: 0 10px;
+                column-gap: 5px;
+                cursor: pointer;
+                padding: 4px;
+                border-radius: 8px;
+                border: 1px solid #e3e2e2;
+                max-height: 30px;
+                p {
+                  white-space: nowrap;
+                  font-weight: 400;
+                  font-size: 14px;
+                  line-height: 17px;
+                }
+                span {
+                  width: 14px;
+                  height: 14px;
+                  font-weight: 400;
+                  line-height: 16px;
+                  border-radius: 50px;
+                  align-items: center;
+                  justify-content: center;
+                  display: flex;
+                  background: #cbd9f9;
+                  color: white;
+                  font-size: 14px;
+                  transition: all 0.15s ease;
+                }
+              }
+              &__list {
+                position: absolute;
+                background: #f8f9fa;
+                z-index: 8;
+                border-radius: 8px;
+                padding: 20px 10px 10px;
+                top: 30px;
+                width: 220px;
+                display: flex;
+                flex-direction: column;
+
+                .close {
+                  cursor: pointer;
+                  width: 20px;
+                  height: 20px;
+                  position: absolute;
+                  right: 10px;
+                  top: 2px;
+                }
+
+                &__created {
+                  display: flex;
+                  flex-direction: column;
+                  row-gap: 8px;
+                  margin-top: 8px;
+
+                  .tagItem {
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    padding: 5px;
+                    border: 1px solid #e3e2e2;
+                    border-radius: 8px;
+
+                    &__description {
+                      font-size: 14px;
+                    }
+
+                    &__info {
+                      display: flex;
+                      align-items: center;
+                      column-gap: 10px;
+
+                      &__name {
+                        font-size: 16px;
+                        font-weight: 600;
+                      }
+
+                      &__color {
+                        border: 1px solid #e3e2e2;
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 50px;
+                      }
+                    }
+
+                    &__images {
+                      position: absolute;
+                      right: 5px;
+                      top: 3px;
+                      display: flex;
+                      column-gap: 3px;
+
+                      img {
+                        cursor: pointer;
+                      }
+
+                      .delete {
+                        width: 14px;
+                        height: 14px;
+                      }
+                    }
+                  }
+                }
+
+                .addNewTag {
+                  display: flex;
+                  align-items: center;
+                  column-gap: 8px;
+                  cursor: pointer;
+                  justify-content: center;
+
+                  p {
+                    font-size: 13px;
+                  }
+
+                  span {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 50px;
+                    align-items: center;
+                    justify-content: center;
+                    display: flex;
+                    background: #52b709;
+                    color: white;
+                    font-size: 16px;
+                    transition: all 0.15s ease;
+                  }
+                }
+
+                .formTag {
+                  display: flex;
+                  flex-direction: column;
+                  padding-top: 8px;
+                  row-gap: 8px;
+                  .arrow {
+                    position: absolute;
+                    cursor: pointer;
+                    top: 5px;
+                    width: 15px;
+                    height: 15px;
+                    transform: rotate(180deg);
+                  }
+
+                  &__input {
+                    outline: none;
+                    border-radius: 8px;
+                    border: 1px solid #e3e2e2;
+                    font-size: 15px;
+                    padding: 5px;
+                  }
+
+                  &__btn {
+                    outline: none;
+                    border: none;
+                    background: #6f6f6f;
+                    color: whitesmoke;
+                    margin: 0 auto;
+                    border-radius: 10px;
+                    font-size: 15px;
+                  }
+
+                  .disable {
+                    opacity: 0.5;
+                    pointer-events: none;
+                  }
+                }
+              }
+            }
+          }
         }
 
         &__container {
@@ -842,7 +1017,6 @@
 
           &__item {
             width: 328px;
-            max-height: 250px;
             padding: 16px;
             position: relative;
             box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
@@ -990,6 +1164,21 @@
                 height: 25px;
               }
             }
+
+            &__tags {
+              display: flex;
+              flex-wrap: wrap;
+              column-gap: 6px;
+              row-gap: 3px;
+              margin: 5px 0 10px;
+
+              .tagItem {
+                padding: 3px 10px;
+                border-radius: 10px;
+                color: white;
+                font-size: 12px;
+              }
+            }
           }
 
           .openItems {

src/redux/projectsTrackerSlice.js

@@ -42,9 +42,17 @@ export const projectsTrackerSlice = createSlice({
         (person) => person.user_id !== action.payload
       );
     },
+    deleteTagProject: (state, action) => {
+      state.projectBoard.mark = state.projectBoard.mark.filter(
+        (tag) => tag.id !== action.payload
+      );
+    },
     addPersonToProject: (state, action) => {
       state.projectBoard.projectUsers.push(action.payload);
     },
+    addNewTagToProject: (state, action) => {
+      state.projectBoard.mark.push(action.payload);
+    },
     activeLoader: (state) => {
       state.boardLoader = true;
     },
@@ -178,7 +186,9 @@ export const {
   setColumnId,
   setColumnPriority,
   deletePersonOnProject,
+  deleteTagProject,
   addPersonToProject,
+  addNewTagToProject,
   filterCreatedByMe,
   filteredParticipateTasks,
   filteredExecutorTasks,