Skip to content

Commit

Permalink
single period, dynamic reporting periods
Browse files Browse the repository at this point in the history
  • Loading branch information
IvnDmnks committed Nov 19, 2024
1 parent 8a95278 commit 108a9ec
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 35 deletions.
9 changes: 9 additions & 0 deletions apps/frontend/src/app/(with-layout)/singleperiod/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
6 changes: 3 additions & 3 deletions apps/frontend/src/components/AfterLogin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions apps/frontend/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/NewProject.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
81 changes: 56 additions & 25 deletions apps/frontend/src/components/ReportingPeriod.tsx
Original file line number Diff line number Diff line change
@@ -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'>
Expand All @@ -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>
);
}
101 changes: 101 additions & 0 deletions apps/frontend/src/components/SinglePeriod.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 1 addition & 1 deletion apps/frontend/src/components/footer.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 108a9ec

Please sign in to comment.