Skip to content

Commit

Permalink
Merge pull request #2133 from ever-co/feat/taskActivity
Browse files Browse the repository at this point in the history 
[fix]: Activity Of Task
  • Loading branch information
@evereq
evereq authored Jan 29, 2024
2 parents dfcf3e1 + 59402b1 commit 3f0b492
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 62 deletions.
125 changes: 91 additions & 34 deletions apps/web/lib/features/task/activity/user-task-activity.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,101 @@
import React from 'react';
import { clsxm } from '@app/utils';
import { Tab } from '@headlessui/react';
import { ActivityFilters } from '@app/constants';
import { ITaskTimesheet } from '@app/interfaces';
import { ChevronDownIcon, ChevronUpIcon } from 'lib/components/svgs';
import { Tooltip } from 'lib/components';
import ScreenshotItem from 'lib/features/activity/components/screenshot-item';

export const UserTaskActivity = () => {
// get slots related to Task Id
// get apps visited related to Task Id
// get visited Sites related to Task Id
export const UserTaskActivity = ({ timesheet }: { timesheet: ITaskTimesheet }) => {
const [hidden, setHidden] = React.useState(true);
// TODO: fetch Apps et Sites Visited
return (
<div className="shadow-md rounded-md p-4 my-4 bg-[#00000014] dark:bg-[#26272C]">
<div className="flex items-center gap-2 my-2">
<h4 className="text-lg">{'Cedric medium'}</h4>
<span>{'05:30'}</span>
<div className="flex justify-between items-center gap-5 py-2 border-b border-b-[#00000014] dark:border-b-[#7B8089]">
<div className="flex items-center gap-2 my-2">
<h4 className="text-base">{timesheet.employee?.fullName}</h4>
<span>{timesheet.duration}</span>
</div>

<div className="flex items-center justify-end gap-2.5">
<button onClick={() => setHidden((e) => !e)}>
{hidden ? (
<ChevronDownIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
) : (
<ChevronUpIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
)}
</button>
</div>
</div>
<div className={clsxm('flex flex-col max-h-80 gap-3', hidden && ['hidden'])}>
<Tab.Group>
<Tab.List className="w-full flex rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2">
{Object.values(ActivityFilters)
.filter((filter) => filter !== 'Tasks')
.map((filter: string) => (
<Tab
key={filter}
className={({ selected }) =>
clsxm(
'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
' focus:outline-none focus:ring-2',
selected
? 'bg-white dark:bg-dark text-blue-700 shadow'
: ' hover:bg-white/[0.50]'
)
}
>
{filter}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panel className="w-full mx-4 py-4">
<div className="my-2 flex w-full overflow-x-auto">
{timesheet.timeSlot?.screenshots?.map((screenshot, i) => (
<div key={i} className="w-1/3 min-w-[20rem] p-2">
<Tooltip
label={screenshot.description}
placement="left-start"
type="VERTICAL"
labelContainerClassName="w-full"
>
<ScreenshotItem
idSlot={timesheet.timeSlot?.id ?? ''}
endTime={timesheet.timeSlot?.stoppedAt ?? ''}
startTime={screenshot.recordedAt}
imageUrl={screenshot.thumbUrl}
percent={timesheet.timeSlot?.percentage ?? 0}
showProgress={false}
onShow={() => null}
/>
</Tooltip>
<div className="bg-gray-100 dark:dark:bg-[#26272C] rounded-b-lg p-2">
<h5>Source</h5>
<div className="my-1 flex gap-1 flex-wrap">
<span className="rounded-lg px-1 mb-1 text-white bg-blue-600">
{timesheet.source}
</span>
{screenshot.apps?.map((app, i) => (
<span
key={i}
className="rounded-lg px-1 mb-1 text-white bg-blue-600"
>
{app}
</span>
))}
</div>
</div>
</div>
))}
</div>
</Tab.Panel>
<Tab.Panel className="w-full mx-4 py-4">{'Apps Tab'}</Tab.Panel>
<Tab.Panel className="w-full mx-4 py-4">{'VisitedSites Tab'}</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
<Tab.Group>
<Tab.List className="w-full flex rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2">
{Object.values(ActivityFilters)
.filter((filter) => filter !== 'Tasks')
.map((filter: string) => (
<Tab
key={filter}
className={({ selected }) =>
clsxm(
'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
' focus:outline-none focus:ring-2',
selected
? 'bg-white dark:bg-dark text-blue-700 shadow'
: ' hover:bg-white/[0.50]'
)
}
>
{filter}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panel className="w-full mx-4 py-4">{'Screenshoot Team Tab'}</Tab.Panel>
<Tab.Panel className="w-full mx-4 py-4">{'Apps Tab'}</Tab.Panel>
<Tab.Panel className="w-full mx-4 py-4">{'VisitedSites Tab'}</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
);
};
56 changes: 30 additions & 26 deletions apps/web/lib/features/task/task-activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import { ITeamTask } from '@app/interfaces';
import { useTaskTimeSheets } from '@app/hooks/features/useTaskActivity';
import { groupByTime } from '@app/helpers/array-data';

import { clsxm } from '@app/utils';
import { ChevronDownIcon, ChevronUpIcon } from 'lib/components/svgs';

export function TaskActivity({ task }: { task: ITeamTask }) {
// get users tasks
const { getTaskTimesheets, taskTimesheets } = useTaskTimeSheets(task?.id);
const [hidden, setHidden] = React.useState(true);

// order activity arr by Time
const groupedData = groupByTime(taskTimesheets);
console.log(groupedData);

React.useEffect(() => {
getTaskTimesheets();
Expand All @@ -22,33 +25,34 @@ export function TaskActivity({ task }: { task: ITeamTask }) {
className="w-full p-4 md:px-4 dark:bg-[#25272D] flex flex-col gap-6 border border-[#00000014] dark:border-[#26272C]"
shadow="bigger"
>
{/* TO DELETE: start */}
<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
<h3 className="text-xl font-semibold py-2">{'05.01.2024'}</h3>
<UserTaskActivity />
<UserTaskActivity />
</div>
{/* TO DELETE: end */}
{groupedData.map((timesheet, i) => (
<div
key={i}
className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"
>
<h3 className="text-xl font-semibold py-2">{timesheet.date}</h3>
{timesheet.items.map((item) => (
<UserTaskActivity key={item.id} />
))}
<div className="flex justify-between items-center gap-5 py-2 border-b border-b-[#00000014] dark:border-b-[#7B8089]">
<div className="flex items-center gap-2 my-2">
<h4 className="text-base">{'Timesheet'}</h4>
</div>
))}

{/* TO DELETE: start */}
<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
<h3 className="text-xl font-semibold py-2">{'03.01.2024'}</h3>
<UserTaskActivity />
<UserTaskActivity />
<UserTaskActivity />
<div className="flex items-center justify-end gap-2.5">
<button onClick={() => setHidden((e) => !e)}>
{hidden ? (
<ChevronDownIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
) : (
<ChevronUpIcon className="h-4 w-4 stroke-[#293241] dark:stroke-white cursor-pointer" />
)}
</button>
</div>
</div>
<div className={clsxm('flex flex-col max-h-80 gap-3', hidden && ['hidden'])}>
{groupedData.map((timesheet, i) => (
<div
key={i}
className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"
>
<h3 className="text-base font-semibold py-2">{timesheet.date}</h3>
{timesheet.items.map((item) => (
<UserTaskActivity key={item.id} timesheet={item} />
))}
</div>
))}
</div>
{/* TO DELETE: end */}
</Card>
);
}
1 change: 0 additions & 1 deletion apps/web/lib/settings/JitsuRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export function JitsuRoot({ pageProps, children }: MyAppProps) {
const isJitsuEnvs: boolean = jitsuConf.host !== '' && jitsuConf.writeKey !== '';
console.log(`Jitsu Enabled: ${isJitsuEnvs}`);
console.log(`Jitsu Configuration: ${JSON.stringify(jitsuConf)}`);
console.log(`Jitsu: ${pageProps}`);

return (
<JitsuProvider
Expand Down
2 changes: 1 addition & 1 deletion apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
"@types/react-dom": "18.0.6",
"@types/react-google-recaptcha": "^2.1.5",
"eslint": "^8.28.0",
"eslint-config-next": "^13.1.6",
"eslint-config-next": "^14.0.4",
"typescript": "^4.9.4"
},
"prettier": {
Expand Down

0 comments on commit 3f0b492

Please sign in to comment.