Merge pull request #2344 from ever-co/develop

Release
ever-co · Mar 30, 2024 · 0f3a60d · 0f3a60d
2 parents 34415c9 + 5fce4b8
commit 0f3a60d
Show file tree

Hide file tree

Showing 25 changed files with 333 additions and 146 deletions.
diff --git a/apps/mobile/yarn.lock b/apps/mobile/yarn.lock
@@ -15057,9 +15057,9 @@ webidl-conversions@^7.0.0:
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
 webpack-dev-middleware@^5.3.1:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
-  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
   dependencies:
     colorette "^2.0.10"
     memfs "^3.4.3"

diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -18,12 +18,34 @@ import { AddIcon, PeoplesIcon } from 'assets/svg';
 import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal';
 import { userTimezone } from '@app/helpers';
 import KanbanSearch from '@components/pages/kanban/search-bar';
-import { EpicPropertiesDropdown, TaskLabelsDropdown, TaskPropertiesDropdown, TaskSizesDropdown } from 'lib/features';
+import {
+	EpicPropertiesDropdown,
+	StatusDropdown,
+	TStatusItem,
+	TaskLabelsDropdown,
+	TaskPropertiesDropdown,
+	TaskSizesDropdown,
+	taskIssues,
+	useStatusValue
+} from 'lib/features';
 import { useRecoilValue } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
+import { CircleIcon } from 'lucide-react';
+import { XMarkIcon } from '@heroicons/react/20/solid';
 
 const Kanban = () => {
-	const { data, setSearchTasks, searchTasks, isLoading, setPriority, setSizes, setLabels, setEpics } = useKanban();
+	const {
+		data,
+		setSearchTasks,
+		searchTasks,
+		isLoading,
+		setPriority,
+		setSizes,
+		setLabels,
+		setEpics,
+		setIssues,
+		issues
+	} = useKanban();
 
 	const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
 	const t = useTranslations();
@@ -56,6 +78,11 @@ const Kanban = () => {
 	const { user } = useAuthenticateUser();
 	const { openModal, isOpen, closeModal } = useModal();
 	const timezone = userTimezone();
+	const { items } = useStatusValue<'issueType'>({
+		status: taskIssues,
+		value: issues as any,
+		onValueChange: setIssues as any
+	});
 	return (
 		<>
 			<MainLayout showTimer={isTrackingEnabled}>
@@ -125,7 +152,49 @@ const Kanban = () => {
 										multiple={true}
 									/>
 								</div>
+								{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
+								<div className="relative">
+									<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
+										<span className="flex">
+											<div
+												className="h-6 w-6 p-1.5 rounded-md mr-1"
+												style={{
+													backgroundColor: issues.bgColor ?? 'transparent'
+												}}
+											>
+												{issues.icon ?? <CircleIcon className="h-3 w-3" />}
+											</div>
+											<p>{issues.name}</p>
+										</span>
+										{issues.value && (
+											<div
+												onClick={() =>
+													setIssues({
+														name: 'Issues',
+														icon: null,
+														bgColor: '',
+														value: ''
+													})
+												}
+												className="w-5 h-5 z-50 p-0.5 cursor-pointer"
+											>
+												<XMarkIcon className="h-4 w-4  dark:text-white" />
+											</div>
+										)}
+									</div>
 
+									<StatusDropdown
+										taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
+										showIssueLabels={true}
+										items={items}
+										value={issues}
+										onChange={(e) => {
+											setIssues(items.find((v) => v.name == e) as TStatusItem);
+										}}
+										issueType="issue"
+									/>
+								</div>
+								{/* </div> */}
 								<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
 									<TaskLabelsDropdown
 										onValueChange={(_, values) => setLabels(values || [])}
@@ -150,7 +219,6 @@ const Kanban = () => {
 								<div className="mt-1">
 									<Separator />
 								</div>
-
 								<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
 							</div>
 						</div>

diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -28,13 +28,15 @@ type FilterTab = 'Tasks' | 'Screenshots' | 'Apps' | 'Visited Sites';
 const Profile = React.memo(function ProfilePage({ params }: { params: { memberId: string } }) {
 	const profile = useUserProfilePage();
 	const { user } = useAuthenticateUser();
-	const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
+	const { isTrackingEnabled, activeTeam, activeTeamManagers } = useOrganizationTeams();
 	const fullWidth = useRecoilValue(fullWidthState);
 	const [activityFilter, setActivityFilter] = useState<FilterTab>('Tasks');
 	const setActivityTypeFilter = useSetRecoilState(activityTypeState);
 
 	const hook = useTaskFilter(profile);
-	const canSeeActivity = profile.userProfile?.id === user?.id || user?.role?.name?.toUpperCase() == 'MANAGER';
+
+	const isManagerConnectedUser = activeTeamManagers.findIndex((member) => member.employee?.user?.id == user?.id);
+	const canSeeActivity = profile.userProfile?.id === user?.id || isManagerConnectedUser != -1;
 
 	const t = useTranslations();
 	const breadcrumb = [
@@ -69,7 +71,7 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 
 	return (
 		<>
-			<MainLayout showTimer={!profileIsAuthUser && isTrackingEnabled}>
+			<MainLayout showTimer={profileIsAuthUser && isTrackingEnabled}>
 				<MainHeader fullWidth={fullWidth} className={clsxm(hookFilterType && ['pb-0'], 'pb-2', 'pt-20')}>
 					{/* Breadcrumb */}
 					<div className="flex items-center gap-8">

diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
@@ -11,6 +11,7 @@ import Link from 'next/link';
 import React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { clsxm } from '@app/utils';
+import { withAuthentication } from 'lib/app/authenticator';
 
 const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 	const t = useTranslations();
@@ -43,7 +44,7 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 						{/* </div> */}
 					</Container>
 				</div>
-				<Container fullWidth={fullWidth} className={clsxm('!p-0')}>
+				<Container fullWidth={fullWidth} className={clsxm('!p-0 !mr-0')}>
 					<div className="flex">
 						<div className="h-[calc(100vh-_186px)]">
 							<LeftSideSettingMenu />
@@ -56,4 +57,4 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 	}
 };
 
-export default SettingsLayout;
+export default withAuthentication(SettingsLayout, { displayName: 'Settings' });
diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
@@ -34,7 +34,7 @@ const Team = () => {
 					{/* General Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.HEADING_TITLE')}
-						className="w-full p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 						id="general-settings"
 					>
 						<div className="flex flex-col">
@@ -47,7 +47,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
-							className="w-full p-4 mt-4 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 							id="invitations"
 						>
 							<InvitationSetting />
@@ -58,7 +58,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
-							className="w-full p-4 mt-4 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 							id="member"
 						>
 							<MemberSetting />
@@ -68,7 +68,7 @@ const Team = () => {
 					{isTeamManager && (
 						<Accordian
 							title={t('pages.settingsTeam.INTEGRATIONS')}
-							className="w-full p-4 mt-4 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 							id="integrations"
 						>
 							<IntegrationSetting />
@@ -78,7 +78,7 @@ const Team = () => {
 					{/* Issues Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
-						className="w-full p-4 mt-4 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 						id="issues-settings"
 					>
 						<IssuesSettings />
@@ -96,7 +96,7 @@ const Team = () => {
 					{/* Danger Zone */}
 					<Accordian
 						title={t('pages.settings.DANDER_ZONE')}
-						className="w-full p-4 mt-4 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 						isDanger={true}
 						id="danger-zones"
 					>

diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -5,11 +5,18 @@ import { useEffect, useState } from 'react';
 import { ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { useTeamTasks } from './useTeamTasks';
 import { IKanban } from '@app/interfaces/IKanban';
+import { TStatusItem } from 'lib/features';
 export function useKanban() {
 	const [loading, setLoading] = useState<boolean>(true);
 	const [searchTasks, setSearchTasks] = useState('');
 	const [labels, setLabels] = useState<string[]>([]);
 	const [epics, setEpics] = useState<string[]>([]);
+	const [issues, setIssues] = useState<TStatusItem>({
+		name: 'Issues',
+		icon: null,
+		bgColor: '',
+		value: ''
+	});
 	const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 	const taskStatusHook = useTaskStatus();
 	const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks();
@@ -26,6 +33,9 @@ export function useKanban() {
 				.filter((task: ITeamTask) => {
 					return priority.length ? priority.includes(task.priority) : true;
 				})
+				.filter((task: ITeamTask) => {
+					return issues.value ? task.issueType === issues.value : true;
+				})
 				.filter((task: ITeamTask) => {
 					return sizes.length ? sizes.includes(task.size) : true;
 				})
@@ -38,21 +48,21 @@ export function useKanban() {
 
 			const getTasksByStatus = (status: string | undefined) => {
 				return tasks.filter((task: ITeamTask) => {
-					return task.status === status;
+					return task.taskStatusId === status;
 				});
 			};
 
 			taskStatusHook.taskStatus.map((taskStatus: ITaskStatusItemList) => {
 				kanban = {
 					...kanban,
-					[taskStatus.name ? taskStatus.name : '']: getTasksByStatus(taskStatus.name)
+					[taskStatus.name ? taskStatus.name : '']: getTasksByStatus(taskStatus.id)
 				};
 			});
 			setKanbanBoard(kanban);
 			setLoading(false);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics]);
+	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics, issues]);
 
 	/**
 	 * collapse or show kanban column
@@ -80,7 +90,7 @@ export function useKanban() {
 	const reorderStatus = (itemStatus: string, index: number) => {
 		taskStatusHook.taskStatus
 			.filter((status: ITaskStatusItemList) => {
-				return status.name === itemStatus;
+				return status.id === itemStatus;
 			})
 			.map((status: ITaskStatusItemList) => {
 				taskStatusHook.editTaskStatus(status.id, {
@@ -100,9 +110,11 @@ export function useKanban() {
 		isLoading: loading,
 		columns: taskStatusHook.taskStatus,
 		searchTasks,
+		issues,
 		setPriority,
 		setLabels,
 		setSizes,
+		setIssues,
 		setEpics,
 		updateKanbanBoard: setKanbanBoard,
 		updateTaskStatus: updateTask,

diff --git a/apps/web/app/hooks/features/useTaskInput.ts b/apps/web/app/hooks/features/useTaskInput.ts
@@ -144,7 +144,7 @@ export function useTaskInput({
 		return createTask(
 			{
 				taskName: query.trim(),
-				issueType: taskIssue.current || undefined,
+				issueType: taskIssue.current || 'Bug',
 				status: taskStatus.current || undefined,
 				priority: taskPriority.current || undefined,
 				size: taskSize.current || undefined,

diff --git a/apps/web/app/hooks/features/useTeamTasks.ts b/apps/web/app/hooks/features/useTeamTasks.ts
@@ -33,6 +33,7 @@ import { useQuery } from '../useQuery';
 import { useSyncRef } from '../useSyncRef';
 import { useOrganizationEmployeeTeams } from './useOrganizatioTeamsEmployee';
 import { useAuthenticateUser } from './useAuthenticateUser';
+import { useTaskStatus } from './useTaskStatus';
 
 export function useTeamTasks() {
 	const { updateOrganizationTeamEmployeeActiveTask } = useOrganizationEmployeeTeams();
@@ -48,7 +49,7 @@ export function useTeamTasks() {
 	const authUser = useSyncRef(useRecoilValue(userState));
 	const memberActiveTaskId = useRecoilValue(memberActiveTaskIdState);
 	// const [employeeState, setEmployeeState] = useRecoilState(employeeTasksState);
-
+	const { taskStatus } = useTaskStatus();
 	const activeTeam = useRecoilValue(activeTeamState);
 	const activeTeamRef = useSyncRef(activeTeam);
 
@@ -57,7 +58,7 @@ export function useTeamTasks() {
 	const { firstLoad, firstLoadData: firstLoadTasksData } = useFirstLoad();
 
 	// Queries hooks
-	const { queryCall, loading, loadingRef, } = useQuery(getTeamTasksAPI);
+	const { queryCall, loading, loadingRef } = useQuery(getTeamTasksAPI);
 	const { queryCall: getTasksByIdQueryCall, loading: getTasksByIdLoading } = useQuery(getTasksByIdAPI);
 	const { queryCall: getTasksByEmployeeIdQueryCall, loading: getTasksByEmployeeIdLoading } =
 		useQuery(getTasksByEmployeeIdAPI);
@@ -214,7 +215,7 @@ export function useTeamTasks() {
 			{
 				taskName,
 				issueType,
-				status,
+				status = taskStatus[0]?.name,
 				priority,
 				size,
 				tags,
@@ -230,11 +231,13 @@ export function useTeamTasks() {
 			},
 			members?: { id: string }[]
 		) => {
+			const activeStatus = taskStatus.find((ts) => ts.name == status);
 			return createQueryCall(
 				{
 					title: taskName,
 					issueType,
 					status,
+					taskStatusId: activeStatus?.id,
 					priority,
 					size,
 					tags,