5.12.0: Желания в карточках проектов на неделе

2026-03-04 19:07:39 +03:00
parent 20773a29b7
commit 2b7b056562
6 changed files with 288 additions and 51 deletions
--- a/play-life-web/package.json
+++ b/play-life-web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "play-life-web",
-  "version": "5.11.2",
+  "version": "5.12.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/play-life-web/src/App.jsx
+++ b/play-life-web/src/App.jsx
@@ -426,13 +426,17 @@ function AppContent() {
        groupProgress2 = jsonData.group_progress_2 !== undefined ? jsonData.group_progress_2 : null
        groupProgress0 = jsonData.group_progress_0 !== undefined ? jsonData.group_progress_0 : null
      }
+
+      // Получаем желания из ответа
+      const wishes = jsonData?.wishes || []
      
      setCurrentWeekData({
        projects: Array.isArray(projects) ? projects : [],
        total: total,
        group_progress_1: groupProgress1,
        group_progress_2: groupProgress2,
-        group_progress_0: groupProgress0
+        group_progress_0: groupProgress0,
+        wishes: wishes
      })
    } catch (err) {
      setCurrentWeekError(err.message)
--- a/play-life-web/src/components/CurrentWeek.css
+++ b/play-life-web/src/components/CurrentWeek.css
@@ -174,3 +174,96 @@
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* Внешний контейнер для карточки проекта */
+.project-card-wrapper {
+  border: 1px solid #e0e4ed;
+  border-radius: 1.5rem;
+  transition: all 0.3s;
+  box-shadow: 0 1px 3px 0 rgb(99 102 241 / 0.08);
+  background-color: #eef0f7;
+}
+
+.project-card-wrapper:hover {
+  box-shadow: 0 2px 6px 0 rgb(99 102 241 / 0.12);
+}
+
+/* Стили для горизонтального скролла желаний в карточке проекта */
+.project-wishes-scroll {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0.5rem 1rem 0.75rem 1rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.project-wishes-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Мини-карточка желания */
+.mini-wish-card {
+  flex-shrink: 0;
+  width: 50px;
+  cursor: pointer;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.mini-wish-card:hover {
+  transform: scale(1.05);
+}
+
+.mini-wish-card:active {
+  transform: scale(0.95);
+}
+
+.mini-wish-image {
+  width: 50px;
+  height: 60px;
+  background: #f0f0f0;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.mini-wish-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mini-wish-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+}
+
+.mini-wish-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+.mini-wish-name {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: #6b7280;
+  margin-top: 0.125rem;
+  line-height: 1.1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
--- a/play-life-web/src/components/CurrentWeek.jsx
+++ b/play-life-web/src/components/CurrentWeek.jsx
@@ -4,6 +4,7 @@ import { useAuth } from './auth/AuthContext'
 import ProjectProgressBar from './ProjectProgressBar'
 import LoadingError from './LoadingError'
 import Toast from './Toast'
+import WishlistDetail from './WishlistDetail'
 import { getAllProjectsSorted, getProjectColor } from '../utils/projectUtils'
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 import 'react-circular-progressbar/dist/styles.css'
@@ -94,8 +95,31 @@ function CircularProgressBar({ progress, size = 120, strokeWidth = 8, showCheckm
  )
 }

+// Компонент мини-карточки желания для отображения внутри карточки проекта
+function MiniWishCard({ wish, onClick }) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (onClick) {
+      onClick(wish)
+    }
+  }
+
+  return (
+    <div className="mini-wish-card" onClick={handleClick}>
+      <div className="mini-wish-image">
+        {wish.image_url ? (
+          <img src={wish.image_url} alt={wish.name} />
+        ) : (
+          <div className="mini-wish-placeholder">🎁</div>
+        )}
+        <div className="mini-wish-overlay"></div>
+      </div>
+    </div>
+  )
+}
+
 // Компонент карточки проекта с круглым прогрессбаром
-function ProjectCard({ project, projectColor, onProjectClick }) {
+function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWishClick }) {
  const { project_name, total_score, min_goal_score, max_goal_score, priority, today_change } = project

  // Вычисляем прогресс по оригинальной логике из ProjectProgressBar
@@ -176,52 +200,69 @@ function ProjectCard({ project, projectColor, onProjectClick }) {
    }
  }

-  return (
-    <div
-      onClick={handleClick}
-      className="bg-white rounded-3xl py-3 px-4 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer border border-gray-200 hover:border-indigo-300"
-    >
-      {/* Верхняя часть с названием и прогрессом */}
-      <div className="flex items-center justify-between">
-            {/* Левая часть - текст (название, баллы, целевая зона) */}
-            <div className="flex-1 min-w-0">
-              <div className="text-base font-semibold text-gray-600 leading-normal truncate mb-0.5">
-                {project_name}
-              </div>
-              <div className="flex items-center gap-2 mb-0.5">
-                <div className="text-3xl font-bold text-black leading-normal">
-                  {total_score?.toFixed(1) || '0.0'}
-                </div>
-                {today_change !== null && today_change !== undefined && today_change !== 0 && (
-                  <div className="text-base font-medium text-gray-400 leading-normal">
-                    ({formatTodayChange(today_change)})
-                  </div>
-                )}
-              </div>
-              <div className="text-xs text-gray-500 leading-normal">
-                Целевая зона: {getTargetZone()}
-              </div>
-            </div>
+  const hasWishes = wishes && wishes.length > 0

-        {/* Правая часть - круглый прогрессбар */}
-        <div className="flex-shrink-0 ml-3">
-          <CircularProgressBar
-            progress={visualProgress}
-            size={80}
-            strokeWidth={8}
-            textSize="small"
-            displayProgress={goalProgress}
-            textPosition="lower"
-            projectColor={projectColor}
-          />
+  return (
+    <div className="project-card-wrapper">
+      <div
+        onClick={handleClick}
+        className="bg-white rounded-3xl py-3 px-4 transition-all duration-300 cursor-pointer"
+      >
+        {/* Верхняя часть с названием и прогрессом */}
+        <div className="flex items-center justify-between">
+              {/* Левая часть - текст (название, баллы, целевая зона) */}
+              <div className="flex-1 min-w-0">
+                <div className="text-base font-semibold text-gray-600 leading-normal truncate mb-0.5">
+                  {project_name}
+                </div>
+                <div className="flex items-center gap-2 mb-0.5">
+                  <div className="text-3xl font-bold text-black leading-normal">
+                    {total_score?.toFixed(1) || '0.0'}
+                  </div>
+                  {today_change !== null && today_change !== undefined && today_change !== 0 && (
+                    <div className="text-base font-medium text-gray-400 leading-normal">
+                      ({formatTodayChange(today_change)})
+                    </div>
+                  )}
+                </div>
+                <div className="text-xs text-gray-500 leading-normal">
+                  Целевая зона: {getTargetZone()}
+                </div>
+              </div>
+
+          {/* Правая часть - круглый прогрессбар */}
+          <div className="flex-shrink-0 ml-3">
+            <CircularProgressBar
+              progress={visualProgress}
+              size={80}
+              strokeWidth={8}
+              textSize="small"
+              displayProgress={goalProgress}
+              textPosition="lower"
+              projectColor={projectColor}
+            />
+          </div>
        </div>
      </div>
+
+      {/* Горизонтальный список желаний */}
+      {hasWishes && (
+        <div className="project-wishes-scroll">
+          {wishes.map((wish) => (
+            <MiniWishCard
+              key={wish.id}
+              wish={wish}
+              onClick={onWishClick}
+            />
+          ))}
+        </div>
+      )}
    </div>
  )
 }

 // Компонент группы проектов по приоритету
-function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick }) {
+function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick, getWishesForProject, onWishClick }) {
  if (projects.length === 0) return null

  return (
@@ -239,6 +280,7 @@ function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick
          if (!project || !project.project_name) return null

          const projectColor = getProjectColor(project.project_name, allProjects, project.color)
+          const projectWishes = getWishesForProject ? getWishesForProject(project.project_id) : []

          return (
            <ProjectCard
@@ -246,6 +288,8 @@ function PriorityGroup({ title, subtitle, projects, allProjects, onProjectClick
              project={project}
              projectColor={projectColor}
              onProjectClick={onProjectClick}
+              wishes={projectWishes}
+              onWishClick={onWishClick}
            />
          )
        })}
@@ -509,6 +553,49 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
  const { authFetch } = useAuth()
  const [isAddModalOpen, setIsAddModalOpen] = useState(false)
  const [toastMessage, setToastMessage] = useState(null)
+  const [selectedWishlistId, setSelectedWishlistId] = useState(null)
+
+  // Желания приходят вместе с данными проектов
+  const wishes = data?.wishes || []
+
+  // Функция для получения числового значения срока из текста
+  const getWeeksValue = (weeksText) => {
+    if (!weeksText) return Infinity
+    if (weeksText === '<1 недели') return 0
+    if (weeksText === '1 неделя') return 1
+    const match = weeksText.match(/(\d+)/)
+    return match ? parseInt(match[1], 10) : Infinity
+  }
+
+  // Функция фильтрации желаний для проекта
+  const getWishesForProject = (projectId) => {
+    const filtered = wishes.filter(wish => {
+      if (wish.unlocked || wish.completed) return false
+      if (wish.locked_conditions_count !== 1) return false
+      const condition = wish.first_locked_condition
+      if (!condition || condition.project_id !== projectId) return false
+      const weeksText = condition.weeks_text
+      if (!weeksText) return false
+      return weeksText === '1 неделя' || weeksText === '<1 недели'
+    })
+    
+    // Сортируем по сроку разблокировки (от меньшего к большему)
+    return filtered.sort((a, b) => {
+      const weeksA = getWeeksValue(a.first_locked_condition?.weeks_text)
+      const weeksB = getWeeksValue(b.first_locked_condition?.weeks_text)
+      return weeksA - weeksB
+    })
+  }
+
+  // Обработчик клика на желание
+  const handleWishClick = (wish) => {
+    setSelectedWishlistId(wish.id)
+  }
+
+  // Закрытие модального окна детализации желания
+  const handleCloseWishDetail = () => {
+    setSelectedWishlistId(null)
+  }

  // Экспортируем функцию открытия модала для использования из App.jsx
  useEffect(() => {
@@ -667,6 +754,8 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
          projects={priorityGroups.main}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
+          getWishesForProject={getWishesForProject}
+          onWishClick={handleWishClick}
        />

        <PriorityGroup
@@ -675,6 +764,8 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
          projects={priorityGroups.important}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
+          getWishesForProject={getWishesForProject}
+          onWishClick={handleWishClick}
        />

        <PriorityGroup
@@ -683,9 +774,21 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
          projects={priorityGroups.others}
          allProjects={allProjects}
          onProjectClick={onProjectClick}
+          getWishesForProject={getWishesForProject}
+          onWishClick={handleWishClick}
        />
      </div>

+      {/* Модальное окно детализации желания */}
+      {selectedWishlistId && (
+        <WishlistDetail
+          wishlistId={selectedWishlistId}
+          onNavigate={onNavigate}
+          onClose={handleCloseWishDetail}
+          onRefresh={refreshData}
+        />
+      )}
+
      {/* Модальное окно добавления записи */}
      {isAddModalOpen && (
        <AddEntryModal