From 56344fa26eb44fa283ef2553e7c07ff1c6736d0d Mon Sep 17 00:00:00 2001 From: Victor Batischev Date: Tue, 19 Mar 2024 16:58:26 +0300 Subject: [PATCH 1/5] fix naming --- src/pages/Profile/Profile.jsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx index 0f5eb972..b8f5f7df 100644 --- a/src/pages/Profile/Profile.jsx +++ b/src/pages/Profile/Profile.jsx @@ -37,25 +37,25 @@ export const Profile = () => { path: "profile/summary", img: summaryIcon, title: "Резюме", - description: "Ваше резюме
заполнено" + description: "Ваше резюме
заполнено" }, { path: "profile/tracker", img: timerIcon, title: "Трекер времени", - description: "Сколько времени занимает
выполнение задач" + description: "Сколько времени занимает
выполнение задач" }, // { // path: "profile/payouts", // img: paymentIcon, // title: "Выплаты", - // description: "У вас подтвержден
статус самозанятого" + // description: "У вас подтвержден
статус самозанятого" // }, { path: "profile/settings", img: settingIcon, title: "Настройки профиля", - description: "Перейдите чтобы начать
редактирование" + description: "Перейдите чтобы начать
редактирование" } ], partner: [ @@ -64,31 +64,31 @@ export const Profile = () => { img: reportsIcon, title: "Мои вакансии", description: - "Ваши открытые вакансии, которыми вы можете управлять" + "Ваши открытые вакансии,
которыми вы можете управлять" }, { path: "profile/employees", img: summaryIcon, title: "Данные персонала", - description: "Наши специалисты
уже работающие у вас" + description: "Наши специалисты,
уже работающие у вас" }, { path: "profile/tracker", img: timerIcon, title: "Трекер времени", - description: "Контроль времени и
выполнение задач" + description: "Контроль времени и
выполнение задач" }, // { // path: "profile/treaties", // img: paymentIcon, // title: "Договоры и отчетность", - // description: "Ключевые условия
договора" + // description: "Ключевые условия
договора" // }, { path: "profile/settings", img: settingIcon, title: "Настройки профиля", - description: "Перейдите чтобы начать
редактирование" + description: "Перейдите чтобы начать
редактирование" } ] }); @@ -116,9 +116,9 @@ export const Profile = () => { />

- {profileInfo?.fio || profileInfo?.username}, + {profileInfo?.fio || profileInfo?.username} {user === "developer" && - ` ${profileInfo?.specification} разработчик`} + `, ${profileInfo?.specification} разработчик`}

From c14590a0cb8219b8053b267fb0a6599abf1ca5d4 Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Wed, 20 Mar 2024 12:59:52 +0300 Subject: [PATCH 2/5] Editing columns, fix addition of participants, commenting catalog --- .../Tracker/TrackerModal/TrackerModal.jsx | 58 ++++++++++++++----- src/components/Navigation/Navigation.jsx | 10 ++-- .../ProjectTicket/ProjectTicket.jsx | 4 +- 3 files changed, 50 insertions(+), 22 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 569a9abb..6a16a744 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -299,13 +299,25 @@ export const TrackerModal = ({ title: columnName } }).then(() => { - setActive(false); - dispatch(editColumnName({ id: columnId, title: columnName })); - showNotification({ - show: true, - text: "Колонка успешно изменена", - type: "success" - }); + const existingColumn = projectBoard.columns.find( + (column) => column.title === columnName + ); + + if (existingColumn) { + showNotification({ + show: true, + text: "Колонка с таким названием уже существует", + type: "error" + }); + } else { + setActive(false); + dispatch(editColumnName({ id: columnId, title: columnName })); + showNotification({ + show: true, + text: "Колонка успешно изменена", + type: "success" + }); + } }); } @@ -375,14 +387,30 @@ export const TrackerModal = ({ email: emailWorker, project_id: projectBoard.id } - }).then((el) => { - setActive(false); - setEmailWorker(""); - showNotification({ - show: true, - text: "Приглашение отправлено", - type: "success" - }); + }).then((response) => { + if (response.status === 400) { + showNotification({ + show: true, + text: "Участник уже добавлен в проект", + type: "error" + }); + } else if (response.status === 404) { + showNotification({ + show: true, + text: "Данной почты не существует", + type: "error" + }); + } else { + setActive(false); + setEmailWorker(""); + // const newParticipant = response.data; + dispatch(addPersonToProject(response)); + showNotification({ + show: true, + text: "Приглашение отправлено", + type: "success" + }); + } }); } else { setEmailError("Некорректный e-mail адрес"); diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 80d0a184..65071f14 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -43,11 +43,11 @@ export const Navigation = () => { } ], partner: [ - { - path: "/catalog", - active: "candidate", - name: "Каталог" - }, + // { + // path: "/catalog", + // active: "candidate", + // name: "Каталог" + // }, { path: "/requests", name: "Мои вакансии" diff --git a/src/components/ProjectTicket/ProjectTicket.jsx b/src/components/ProjectTicket/ProjectTicket.jsx index d4a71b37..25816ce0 100644 --- a/src/components/ProjectTicket/ProjectTicket.jsx +++ b/src/components/ProjectTicket/ProjectTicket.jsx @@ -159,14 +159,14 @@ export const ProjectTicket = ({ project, index }) => { setAcceptModalOpen(true); }} > - + {/*

в архив

{ navigate(`/profile/statistics/${project.id}`); }} - > + > */}

статистика

From c9dafd95a94c0abfab14296ea9835430264e44dc Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Fri, 22 Mar 2024 16:31:59 +0300 Subject: [PATCH 3/5] layout tracker --- .../Tracker/TrackerModal/TrackerModal.jsx | 1 - .../ProjectTicket/ProjectTicket.jsx | 10 ++++++- .../ProjectTicket/projectTicket.scss | 29 ++++++++++++++----- src/pages/Tracker/Tracker.jsx | 12 ++++++-- src/pages/Tracker/tracker.scss | 28 +++++++++++++----- 5 files changed, 61 insertions(+), 19 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 6a16a744..b933a7ef 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -403,7 +403,6 @@ export const TrackerModal = ({ } else { setActive(false); setEmailWorker(""); - // const newParticipant = response.data; dispatch(addPersonToProject(response)); showNotification({ show: true, diff --git a/src/components/ProjectTicket/ProjectTicket.jsx b/src/components/ProjectTicket/ProjectTicket.jsx index 25816ce0..1f12be5e 100644 --- a/src/components/ProjectTicket/ProjectTicket.jsx +++ b/src/components/ProjectTicket/ProjectTicket.jsx @@ -101,7 +101,10 @@ export const ProjectTicket = ({ project, index }) => { alt="avatar" className="project__avatar" /> - {project.owner_info.fio} +
+

Создатель проекта

+ {project.owner_info.fio} +
@@ -112,6 +115,11 @@ export const ProjectTicket = ({ project, index }) => { Посмотреть статистику */} + {}}> + Просмотреть
+ статистику проекта + + { diff --git a/src/components/ProjectTicket/projectTicket.scss b/src/components/ProjectTicket/projectTicket.scss index 8f397ce3..00af767b 100644 --- a/src/components/ProjectTicket/projectTicket.scss +++ b/src/components/ProjectTicket/projectTicket.scss @@ -2,7 +2,8 @@ display: flex; flex-direction: column; position: relative; - width: 300px; + width: 22%; + height: 170px; background: #f1f1f1; border-radius: 12px; @@ -29,7 +30,7 @@ text-overflow: ellipsis; font-size: 18px; color: #111112; - margin-bottom: 10px; + margin: 0 0 15px 0; &:hover { color: black; @@ -44,14 +45,15 @@ p { color: #6f6f6f; margin-bottom: 0; - font-size: 12px; - font-weight: 500; + font-size: 9px; + font-weight: 300; line-height: 17px; } span { color: blue; font-size: 15px; + font-weight: 400; } .count { @@ -80,18 +82,29 @@ } } + &-stats { + font-size: 12px; + font-weight: 300; + line-height: 17px; + text-decoration: underline; + color: #678eda; + position: absolute; + left: 18px; + bottom: 10px; + } + .menu-settings { position: absolute; font-size: 30px; color: #6f6f6f; right: 15px; - top: -10px; + bottom: 10px; } &__avatar { - width: 25px; - height: 25px; - margin-right: 10px; + width: 30px; + height: 30px; + margin: 0 10px 0 0; } &__open-tracker { diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index 1ab0c9f6..cac0cac7 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -225,8 +225,16 @@ export const Tracker = () => { setModalCreateProject(true); }} > - # -

Добавить проект

+

+ Добавить новый проект +

+
+ # +

+ Ставьте задачи, следите за прогрессом, ведите учёт + рабочего времени +

+
)} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index b74c2b1f..7e6965b3 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -162,21 +162,35 @@ } .create-project-btn { - width: 300px; - height: 83px; + width: 22%; + height: 170px; border-radius: 12px; background: #ecf8e5; color: #000000; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + justify-content: flex-start; transition: 0.4s; + padding: 10px 10px; &__text { - text-align: left; - font-weight: 400; + color: #1458dd; + text-align: center; + font-weight: 700; font-size: 18px; - margin-left: 15px; + margin: 0 0 25px 0; + } + + &__content { + display: flex; + align-items: center; + margin: 0 20px 0 20px; + font-size: 10px; + font-weight: 400; + + img { + margin: 0 20px 0 0; + } } &:hover { From caaee748105345397203f446951ea7e322e8420f Mon Sep 17 00:00:00 2001 From: Mikola Date: Sun, 31 Mar 2024 20:38:01 +0300 Subject: [PATCH 4/5] all tasks table --- src/pages/Tracker/Tracker.jsx | 230 ++++++++++++++++++++++++++------- src/pages/Tracker/tracker.scss | 96 ++++++++++++++ 2 files changed, 281 insertions(+), 45 deletions(-) diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index 1ab0c9f6..a245f124 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -1,5 +1,11 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { getTheme } from "@table-library/react-table-library/baseline"; +import { CompactTable } from "@table-library/react-table-library/compact"; +import { usePagination } from "@table-library/react-table-library/pagination"; +import { useSort } from "@table-library/react-table-library/sort"; +import { useTheme } from "@table-library/react-table-library/theme"; +import { getCorrectDate } from "@utils/calendarHelper"; import { getProjects, @@ -9,7 +15,7 @@ import { setToggleTab } from "@redux/projectsTrackerSlice"; -import { caseOfNum } from "@utils/helper"; +import { caseOfNum, urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -28,7 +34,7 @@ import addProjectImg from "assets/icons/addProjectImg.svg"; import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; import filterIcon from "assets/icons/filterIcon.svg"; -import search from "assets/icons/serchIcon.png"; +import searchImg from "assets/icons/serchIcon.png"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; import archive from "assets/images/archiveIcon.png"; @@ -38,20 +44,99 @@ import noProjects from "assets/images/noProjects.png"; import statusTimeTask from "assets/images/statusTimeTask.svg"; import "./tracker.scss"; +import { Link } from "react-router-dom"; +import rightArrow from "assets/icons/arrows/arrowRight.svg"; export const Tracker = () => { const dispatch = useDispatch(); const projects = useSelector(getProjects); const tab = useSelector(getToggleTab); + const theme = useTheme(getTheme()); + const [nodes, setNodes] = useState([]); + const [initialNodes, setInitialNodes] = useState([]); const [allTasks, setAllTasks] = useState([]); const [filteredAllTasks, setFilteredAllTasks] = useState([]); const [loader, setLoader] = useState(false); const [filterCompleteTasks, setFilterCompleteTasks] = useState([]); const [allCompletedTasks, setAllCompletedTasks] = useState([]); + const [search, setSearch] = useState(""); const [modalCreateProject, setModalCreateProject] = useState(false); + const COLUMNS = [ + { + label: "Задача", + renderCell: (item) =>

, + sort: { sortKey: "NAME" } + }, + { + label: "Создано", + renderCell: (item) => {getCorrectDate(item.created_at)}, + sort: { sortKey: "CREATE" }, + }, + { + label: "Дедлайн", + renderCell: (item) => {item.dead_line ? getCorrectDate(item.dead_line) : 'Без дедлайна'}, + sort: { sortKey: "DEADLINE" } + }, + { + label: "Потраченное время", + renderCell: (item) => {item.timers.length ? getSpendTime(item.timers) : 'Трекер не был включен'}, + sort: { sortKey: "SPEND" } + } + ]; + + let data = { nodes }; + + const sort = useSort( + data, + { + onChange: onSortChange + }, + { + sortFns: { + NAME: (array) => array.sort((a, b) => a.title.localeCompare(b.title)), + CREATE: (array) => array.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)), + DEADLINE: (array) => array.sort((a, b) => new Date(a.dead_line) - new Date(b.dead_line)), + SPEND: (array) => array.sort((a, b) => getSpendTime(a.timers, true) - getSpendTime(b.timers, true)), + } + } + ); + + const pagination = usePagination(data, { + state: { + page: 0, + size: 11 + } + }); + + function getSpendTime(times, seconds) { + let timerSeconds = 0; + times.forEach((time) => { + timerSeconds += time.deltaSeconds; + }) + if (seconds) { + return timerSeconds + } + return `${Math.floor(timerSeconds / 60 / 60)}:${Math.floor((timerSeconds / 60) % 60)}:${timerSeconds % 60}` + } + + function onSortChange(action, state) { + console.log(action, state); + } + + const handleSearch = (event) => { + setSearch(event.target.value); + setNodes( + initialNodes.filter((item) => + item.title + .toLowerCase() + .includes(event.target.value.toLowerCase()) + ) + ); + }; + useEffect(() => { setLoader(true); apiRequest( @@ -84,6 +169,8 @@ export const Tracker = () => { : []; setAllTasks(allTasks); setFilteredAllTasks(allTasks); + setNodes(allTasks) + setInitialNodes(allTasks) setAllCompletedTasks(completedTasks); setFilterCompleteTasks(completedTasks); }) @@ -238,53 +325,106 @@ export const Tracker = () => { : "tracker__tabs__content__projects" } > -
-
-
-

- {25} - {35} -

-

Сентября,

-

2023

-
+ {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* {25} - {35}*/} + {/*

*/} + {/*

Сентября,

*/} + {/*

2023

*/} + {/*
*/} -
- - -
-
+ {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/*
*/} -
- search - filterAllTask(event)} + {/*
*/} + {/* search*/} + {/* filterAllTask(event)}*/} + {/* />*/} + {/*
*/} + + {/*
*/} + {/* */} + {/* #*/} + {/*

Фильтр

*/} + {/* */} + {/* */} + {/*

Очистить фильтр

*/} + {/* */} + {/*
*/} + {/*
*/} + + {loader ? : + <> +
+ search + +
+ -
+
+ + + {pagination.state.getPages(data.nodes).map((_, index) => ( + + ))} + + +
+ + } -
- - # -

Фильтр

- - -

Очистить фильтр

- -
-
- - {loader && } - - + {/**/}
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index b74c2b1f..5b5dad21 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1937,4 +1937,100 @@ } } } + + .table { + &__search { + display: flex; + background: #F0F2F5; + border-radius: 5px; + width: 100%; + padding: 14px 12px; + column-gap: 10px; + align-items: center; + margin-bottom: 20px; + + img { + width: 20px; + height: 20px; + } + + input { + background: none; + border: none; + outline: none; + font-size: 16px; + color: #9BABC5; + width: 100%; + + &::placeholder { + color: #9BABC5; + } + } + } + + &__pagination { + display: flex; + margin: 25px auto 0; + column-gap: 12px; + + button { + font-size: 14px; + width: 32px; + border-radius: 5px; + height: 32px; + color: #2E3A59; + } + + .switch { + border: none; + background: #F0F2F5; + font-weight: 600; + } + + .disable { + opacity: 0.7; + } + } + + &__pages { + display: flex; + column-gap: 4px; + color: black; + background: white; + + .page { + border: 1px solid #E8ECF8; + background: none; + + &--active { + border: none; + background: #9DA65D; + color: white; + } + } + } + } + + table { + grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr); + th { + border-top: none; + border-bottom: 1px solid #F5F6F8; + color: #2E3A59; + padding: 0 7.5px 15px; + } + + td { + padding: 22px 7.5px; + color: #2E3A59; + border-top: none; + + p { + max-width: 430px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } } From 35f76abe60b08a715f61c19f21f808bf41254a90 Mon Sep 17 00:00:00 2001 From: Mikola Date: Sun, 31 Mar 2024 20:38:16 +0300 Subject: [PATCH 5/5] all tasks table --- src/pages/Tracker/Tracker.jsx | 90 ++++++++++++++++++++++++----------- 1 file changed, 62 insertions(+), 28 deletions(-) diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index a245f124..7f74b6bb 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -1,11 +1,11 @@ -import React, { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; import { getTheme } from "@table-library/react-table-library/baseline"; import { CompactTable } from "@table-library/react-table-library/compact"; import { usePagination } from "@table-library/react-table-library/pagination"; import { useSort } from "@table-library/react-table-library/sort"; import { useTheme } from "@table-library/react-table-library/theme"; -import { getCorrectDate } from "@utils/calendarHelper"; +import React, { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Link } from "react-router-dom"; import { getProjects, @@ -15,6 +15,7 @@ import { setToggleTab } from "@redux/projectsTrackerSlice"; +import { getCorrectDate } from "@utils/calendarHelper"; import { caseOfNum, urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -32,6 +33,7 @@ import ProjectTicket from "@components/ProjectTicket/ProjectTicket"; import addProjectImg from "assets/icons/addProjectImg.svg"; import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; +import rightArrow from "assets/icons/arrows/arrowRight.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; import filterIcon from "assets/icons/filterIcon.svg"; import searchImg from "assets/icons/serchIcon.png"; @@ -44,8 +46,6 @@ import noProjects from "assets/images/noProjects.png"; import statusTimeTask from "assets/images/statusTimeTask.svg"; import "./tracker.scss"; -import { Link } from "react-router-dom"; -import rightArrow from "assets/icons/arrows/arrowRight.svg"; export const Tracker = () => { const dispatch = useDispatch(); @@ -67,22 +67,34 @@ export const Tracker = () => { const COLUMNS = [ { label: "Задача", - renderCell: (item) =>

, + renderCell: (item) => ( +

+ ), sort: { sortKey: "NAME" } }, { label: "Создано", renderCell: (item) => {getCorrectDate(item.created_at)}, - sort: { sortKey: "CREATE" }, + sort: { sortKey: "CREATE" } }, { label: "Дедлайн", - renderCell: (item) => {item.dead_line ? getCorrectDate(item.dead_line) : 'Без дедлайна'}, + renderCell: (item) => ( + + {item.dead_line ? getCorrectDate(item.dead_line) : "Без дедлайна"} + + ), sort: { sortKey: "DEADLINE" } }, { label: "Потраченное время", - renderCell: (item) => {item.timers.length ? getSpendTime(item.timers) : 'Трекер не был включен'}, + renderCell: (item) => ( + + {item.timers.length + ? getSpendTime(item.timers) + : "Трекер не был включен"} + + ), sort: { sortKey: "SPEND" } } ]; @@ -97,9 +109,15 @@ export const Tracker = () => { { sortFns: { NAME: (array) => array.sort((a, b) => a.title.localeCompare(b.title)), - CREATE: (array) => array.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)), - DEADLINE: (array) => array.sort((a, b) => new Date(a.dead_line) - new Date(b.dead_line)), - SPEND: (array) => array.sort((a, b) => getSpendTime(a.timers, true) - getSpendTime(b.timers, true)), + CREATE: (array) => + array.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)), + DEADLINE: (array) => + array.sort((a, b) => new Date(a.dead_line) - new Date(b.dead_line)), + SPEND: (array) => + array.sort( + (a, b) => + getSpendTime(a.timers, true) - getSpendTime(b.timers, true) + ) } } ); @@ -115,11 +133,13 @@ export const Tracker = () => { let timerSeconds = 0; times.forEach((time) => { timerSeconds += time.deltaSeconds; - }) + }); if (seconds) { - return timerSeconds + return timerSeconds; } - return `${Math.floor(timerSeconds / 60 / 60)}:${Math.floor((timerSeconds / 60) % 60)}:${timerSeconds % 60}` + return `${Math.floor(timerSeconds / 60 / 60)}:${Math.floor( + (timerSeconds / 60) % 60 + )}:${timerSeconds % 60}`; } function onSortChange(action, state) { @@ -130,9 +150,7 @@ export const Tracker = () => { setSearch(event.target.value); setNodes( initialNodes.filter((item) => - item.title - .toLowerCase() - .includes(event.target.value.toLowerCase()) + item.title.toLowerCase().includes(event.target.value.toLowerCase()) ) ); }; @@ -169,8 +187,8 @@ export const Tracker = () => { : []; setAllTasks(allTasks); setFilteredAllTasks(allTasks); - setNodes(allTasks) - setInitialNodes(allTasks) + setNodes(allTasks); + setInitialNodes(allTasks); setAllCompletedTasks(completedTasks); setFilterCompleteTasks(completedTasks); }) @@ -365,10 +383,12 @@ export const Tracker = () => { {/*
*/} {/*
*/} - {loader ? : + {loader ? ( + + ) : ( <> -
- search +
+ search { />
- } + )} {/*