From 108a9ec40049a9fd00a0f9d35123a1d94db10ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Domonkos?= <ivandomonkos@edu.bme.hu>
Date: Tue, 19 Nov 2024 11:02:07 +0100
Subject: [PATCH] single period, dynamic reporting periods

---
 .../app/(with-layout)/singleperiod/page.tsx   |   9 ++
 apps/frontend/src/components/AfterLogin.tsx   |   6 +-
 apps/frontend/src/components/Navbar.tsx       |  10 +-
 apps/frontend/src/components/NewProject.tsx   |   2 +-
 .../src/components/ReportingPeriod.tsx        |  81 +++++++++-----
 apps/frontend/src/components/SinglePeriod.tsx | 101 ++++++++++++++++++
 apps/frontend/src/components/footer.tsx       |   2 +-
 7 files changed, 176 insertions(+), 35 deletions(-)
 create mode 100644 apps/frontend/src/app/(with-layout)/singleperiod/page.tsx
 create mode 100644 apps/frontend/src/components/SinglePeriod.tsx

diff --git a/apps/frontend/src/app/(with-layout)/singleperiod/page.tsx b/apps/frontend/src/app/(with-layout)/singleperiod/page.tsx
new file mode 100644
index 0000000..f9ae5b3
--- /dev/null
+++ b/apps/frontend/src/app/(with-layout)/singleperiod/page.tsx
@@ -0,0 +1,9 @@
+import SinglePeriod from '../../../components/SinglePeriod';
+
+export default function Home() {
+  return (
+    <main className='flex items-center justify-center bg-page-bg-color'>
+      <SinglePeriod />
+    </main>
+  );
+}
diff --git a/apps/frontend/src/components/AfterLogin.tsx b/apps/frontend/src/components/AfterLogin.tsx
index 509e7cc..7ba76c4 100644
--- a/apps/frontend/src/components/AfterLogin.tsx
+++ b/apps/frontend/src/components/AfterLogin.tsx
@@ -18,7 +18,7 @@ export default function GreetingsPage() {
         <div className='flex flex-row gap-x-4 items-center justify-center'>
           <a
             href='/reportingperiod'
-            className='block w-64 h-96 max-w-sm py-6 px-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
+            className='block w-64 h-96 max-w-sm py-6 px-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition duration-300'
           >
             <h5 className='mb-2 text-2xl font-bold tracking-tight text-text-color dark:text-white'>
               Beszámolási időszakok
@@ -30,7 +30,7 @@ export default function GreetingsPage() {
           </a>
           <a
             href='/currentjobs'
-            className='block w-64 h-96 max-w-sm p-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
+            className='block w-64 h-96 max-w-sm p-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition duration-300'
           >
             <h5 className='mb-2 text-2xl font-bold tracking-tight text-text-color dark:text-white'>Munkák</h5>
             <p className='font-normal text-text-color dark:text-gray-400'>Láthatod a jelenleg zajló</p>
@@ -46,7 +46,7 @@ export default function GreetingsPage() {
           </a>
           <a
             href='/newproject'
-            className='block w-64 h-96 max-w-sm p-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
+            className='block w-64 h-96 max-w-sm p-6 bg-bg-color2 border border-black rounded-lg shadow hover:bg-bg-color1 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition duration-300'
           >
             <h5 className='mb-2 text-2xl font-bold tracking-tight text-text-color dark:text-white'>Új Projekt</h5>
             <p className='font-normal text-text-color dark:text-gray-400'>Itt tudsz új projeket nyitni.</p>
diff --git a/apps/frontend/src/components/Navbar.tsx b/apps/frontend/src/components/Navbar.tsx
index 67470b7..756ac02 100644
--- a/apps/frontend/src/components/Navbar.tsx
+++ b/apps/frontend/src/components/Navbar.tsx
@@ -1,28 +1,28 @@
 export default function Navbar() {
   return (
-    <header className='flex flex-col items-center justify-between px-8 py-5 bg-page-bg-color'>
+    <header className='flex flex-col items-center justify-between px-8 py-5 bg-page-bg-color sticky top-0'>
       <nav className='text-text-color space-x-5 rounded py-5'>
         <a
           href='/afterlogin'
-          className='w-32 h-32 hover:scale-110 transform transition-transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg duration-300'
+          className='w-32 h-32 hover:scale-110 transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg transition duration-300'
         >
           Kezdőlap
         </a>
         <a
           href='/reportingperiod'
-          className='w-32 h-32 hover:scale-110 transform transition-transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg duration-300'
+          className='w-32 h-32 hover:scale-110 transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg transition duration-300'
         >
           Beszámoló időszakok
         </a>
         <a
           href='/currentjobs'
-          className='w-32 h-32 hover:scale-110 transform transition-transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg duration-300'
+          className='w-32 h-32 hover:scale-110 transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg transition duration-300'
         >
           Munkák
         </a>
         <a
           href='/newproject'
-          className='w-32 h-32 hover:scale-110 transform transition-transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg duration-300'
+          className='w-32 h-32 hover:scale-110 transform hover:bg-bg-color1 font-bold py-2 px-4 rounded-lg hover:shadow-lg transition duration-300'
         >
           Új Projekt
         </a>
diff --git a/apps/frontend/src/components/NewProject.tsx b/apps/frontend/src/components/NewProject.tsx
index 43661c0..e7bc052 100644
--- a/apps/frontend/src/components/NewProject.tsx
+++ b/apps/frontend/src/components/NewProject.tsx
@@ -65,7 +65,7 @@ export default function NewProject() {
           <div className='justify-center flex'>
             <button
               type='submit'
-              className='w-1/2 border font-semibold text-text-color rounded-lg text-sm px-5 py-2.5 text-center border-[#8b97a4] hover:border-text-color hover:bg-[#2c3540] focus:ring-4 '
+              className='w-1/2 border font-semibold text-text-color rounded-lg text-sm px-5 py-2.5 text-center border-[#8b97a4] hover:border-text-color hover:bg-[#2c3540] focus:ring-4 transition duration-300'
             >
               Létrehozás
             </button>
diff --git a/apps/frontend/src/components/ReportingPeriod.tsx b/apps/frontend/src/components/ReportingPeriod.tsx
index 916120d..7095e04 100644
--- a/apps/frontend/src/components/ReportingPeriod.tsx
+++ b/apps/frontend/src/components/ReportingPeriod.tsx
@@ -1,4 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
 export function ReportingPeriod() {
+  interface Week {
+    start: string;
+    end: string;
+    numberOfTheWeek: number;
+    completed?: boolean;
+  }
+
+  const [weeks, setWeeks] = useState<Week[]>([]);
+
+  useEffect(() => {
+    const generateWeeks = (startDate: Date, weeksCounter: number): Week[] => {
+      const weeks: Week[] = [];
+      const current = new Date(startDate);
+
+      for (let i = 0; i < weeksCounter; ++i) {
+        const start = new Date(current);
+        start.setDate(current.getDate() - current.getDay() + 1);
+        const end = new Date(start);
+        end.setDate(start.getDate() + 6);
+
+        weeks.push({
+          start: start.toLocaleDateString(),
+          end: end.toLocaleDateString(),
+          numberOfTheWeek: i + 1,
+        });
+
+        current.setDate(current.getDate() + 7);
+      }
+
+      return weeks;
+    };
+
+    const startDate = new Date('2024-09-02'); //Itt át lehet állítani félévenként esetleg vagy valami okosabb megoldást kitalálni.
+    const generatedWeeks = generateWeeks(startDate, 14);
+    setWeeks(generatedWeeks);
+  }, []);
+
   return (
     <div className='flex flex-col w-1/2'>
       <div className='text-center pt-8'>
@@ -15,35 +56,25 @@ export function ReportingPeriod() {
               </tr>
             </thead>
             <tbody>
-              <tr className='border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-bg-color1 dark:border-white/10 dark:hover:bg-neutral-600'>
-                <td className='float-left whitespace-nowrap px-6 py-4 font-medium tracking-wider'>
-                  <a href='#'>2021.01.01 - 2021.01.15</a>
-                </td>
-                <td className='float-right whitespace-nowrap px-6 py-4 font-medium'>Pipa vagy x</td>
-              </tr>
-              <tr className='border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-bg-color1 dark:border-white/10 dark:hover:bg-neutral-600'>
-                <td className='float-left whitespace-nowrap px-6 py-4 font-medium tracking-wider'>
-                  <a href='#'>2021.01.16 - 2021.02.01.</a>
-                </td>
-                <td className='float-right whitespace-nowrap px-6 py-4 font-medium'>Pipa vagy x</td>
-              </tr>
-              <tr className='border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-bg-color1 dark:border-white/10 dark:hover:bg-neutral-600'>
-                <td className='float-left whitespace-nowrap px-6 py-4 font-medium tracking-wider'>
-                  <a href='#'>2021.02.02. - 2021.02.15.</a>
-                </td>
-                <td className='float-right whitespace-nowrap px-6 py-4 font-medium'>Pipa vagy x</td>
-              </tr>
-              <tr className='border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-bg-color1 dark:border-white/10 dark:hover:bg-neutral-600'>
-                <td className='float-left whitespace-nowrap px-6 py-4 font-medium tracking-wider'>
-                  <a href='#'>2021.02.15. - 2021.03.01.</a>
-                </td>
-                <td className='float-right whitespace-nowrap px-6 py-4 font-medium'>Pipa vagy x</td>
-              </tr>
+              {weeks.map((week) => (
+                <tr
+                  key={`${week.start}-${week.end}`}
+                  className='border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-bg-color1 dark:border-white/10 dark:hover:bg-neutral-600'
+                >
+                  <a
+                    href={`/singleperiod?numberOfTheWeek=${encodeURIComponent(week.numberOfTheWeek)}&start=${encodeURIComponent(week.start)}&end=${encodeURIComponent(week.end)}`}
+                  >
+                    <td className='float-left whitespace-nowrap px-6 py-4 font-medium tracking-wider'>
+                      {week.numberOfTheWeek}. hét ({week.start} - {week.end})
+                    </td>
+                  </a>
+                  <td className='float-right whitespace-nowrap px-6 py-4 font-medium'>Pipa vagy x</td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>
       </div>
-      <a href='https://github.com/kir-dev/sprint-review-app' target='_blank' rel='noreferrer' />
     </div>
   );
 }
diff --git a/apps/frontend/src/components/SinglePeriod.tsx b/apps/frontend/src/components/SinglePeriod.tsx
new file mode 100644
index 0000000..91a2358
--- /dev/null
+++ b/apps/frontend/src/components/SinglePeriod.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import api from '../lib/axiosConfig';
+
+export default function SinglePeriod() {
+  const search = useSearchParams();
+  const start = search.get('start');
+  const end = search.get('end');
+  const numberOfTheWeek = search.get('numberOfTheWeek');
+  //------------------------------------
+  interface Task {
+    projectId: string;
+  }
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [showTextarea, setShowTextarea] = useState(false);
+  const [textareaValue, setTextareaValue] = useState<string>('');
+
+  useEffect(() => {
+    api.get('/tasks').then((res) => {
+      setTasks(res.data);
+    });
+  }, []);
+
+  const handleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+  const handleTaskClick = (tasks: Task) => {
+    setSelected(tasks.projectId);
+    setIsOpen(false);
+    setShowTextarea(true);
+    setTextareaValue('');
+  };
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTextareaValue(e.target.value);
+  };
+
+  return (
+    <div className='w-3/5 flex px-8 py-8 mx-auto lg:py-0'>
+      <div className='p-6 space-y-4 md:space-y-6 sm:p-8 w-full'>
+        <h1 className='text-xl font-bold leading-tight tracking-tight text-text-color-h1 md:text-4xl dark:text-bg-color2 w-full text-center'>
+          {numberOfTheWeek}. hét ({start} - {end})
+        </h1>
+        <div>
+          {!selected && (
+            <button
+              className='text-text-color border mb-5 rounded-lg p-2 font-semibold text-sm border-[#8b97a4] hover:border-text-color hover:bg-[#2c3540] focus:ring-4 transition duration-300'
+              onClick={handleDropdown}
+            >
+              + feladat hozzáadása
+            </button>
+          )}
+
+          {isOpen && (
+            <div className=''>
+              {tasks.map((task) => (
+                <div
+                  key={task.projectId}
+                  onClick={() => handleTaskClick(task)}
+                  className='w-6 text-text-color border mb-2 rounded-lg p-2 font-semibold text-sm border-[#8b97a4] hover:border-text-color hover:bg-[#2c3540] focus:ring-4'
+                >
+                  {task.projectId}
+                </div>
+              ))}
+            </div>
+          )}
+          {showTextarea && (
+            <div className='mb-10'>
+              <p className='text-text-color text-l mb-2'>{selected ? `${selected} :` : 'Nincs kiválasztott projekt'}</p>
+              <label htmlFor='textarea' />
+              <textarea
+                id='textarea'
+                value={textareaValue}
+                onChange={handleTextareaChange}
+                className='w-full h-60 bg-bg-color2 border border-[#8b97a4] text-white sm:text-sm rounded-lg block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-bg-color2 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                placeholder='Írd le mit dolgoztál a héten'
+              />
+              <button
+                type='submit'
+                className='mt-5 border font-semibold text-text-color rounded-lg text-sm px-5 py-2.5 text-center border-[#8b97a4] hover:border-text-color hover:bg-[#2c3540] focus:ring-4 transition duration-300'
+              >
+                Mentés
+              </button>
+              <button
+                type='submit'
+                className='float-right mt-5 border font-semibold text-text-color rounded-lg text-sm px-5 py-2.5 text-center border-[#8b97a4] hover:border-text-color hover:bg-red-500 hover:text-white focus:ring-4 transition duration-300'
+              >
+                Törlés
+              </button>
+              <hr className='mt-5 border border-y-0.5' />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/footer.tsx b/apps/frontend/src/components/footer.tsx
index f088513..4b0c000 100644
--- a/apps/frontend/src/components/footer.tsx
+++ b/apps/frontend/src/components/footer.tsx
@@ -1,7 +1,7 @@
 export function Footer() {
   return (
     <footer className='bg-page-bg-color flex items-center justify-center'>
-      <p className='text-gray-500 text-sm mb-8'>@Kir-Dev pod-oscar</p>
+      <p className='text-gray-500 text-sm my-8'>@Kir-Dev pod-oscar</p>
     </footer>
   );
 }