3108 feature/ task list view all tasks in a team (#3234)

* refactor(web): [Task in Team]: Add task table and paginations * refactor(web): [Task in Team]: Add filter and pagination * refactor(web): [Task in Team] Add search feature * fix(web): [Task in Team] search feature * fix(web): fix main container horizontal scroll * refactor(web): replace overflow-scroll by overflow-auto * fix(web): [Vertical Sidebar] fix sidebar trigger on collapsed icons * fix(web): eslint error * fix(web): [Vertical Sidebar] fix active sidebar menu on page change * fix(web): [Vertical Sidebar] fix label on active sidebar menu * refactor(web): [Vertical Sidebar] remove project sub-menu * fix(web): deepscan error * fix(web): deepscan error * refactor(web): [Task in Team] Enhance accessibility and styling consistency for assign-user * refactor(web): Encode username parameter in URL. * refactor(web): [Task in Team] Fix duplication of Status Badges * refactor(web): Simplify the conditional rendering by removing unnecessary Fragment.
ever-co · Nov 6, 2024 · 25e31d8 · 25e31d8
1 parent a48a46a
commit 25e31d8
Show file tree

Hide file tree

Showing 41 changed files with 2,724 additions and 2,273 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,7 +19,7 @@
 		"source.organizeImports": "never",
 		"source.sortMembers": "never",
 		"organizeImports": "never",
-		"source.removeUnusedImports": "always"
+		// "source.removeUnusedImports": "always"
 	},
 	"vsicons.presets.angular": true,
 	"deepscan.enable": true,

diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
@@ -21,46 +21,28 @@ import { JitsuOptions } from '@jitsu/jitsu-react/dist/useJitsu';
 
 import { PHProvider } from './integration/posthog/provider';
 
-const locales = [
-  'en',
-  'de',
-  'ar',
-  'bg',
-  'zh',
-  'nl',
-  'de',
-  'he',
-  'it',
-  'pl',
-  'pt',
-  'ru',
-  'es',
-  'fr'
-];
+const locales = ['en', 'de', 'ar', 'bg', 'zh', 'nl', 'de', 'he', 'it', 'pl', 'pt', 'ru', 'es', 'fr'];
 interface Props {
-  params: { locale: string };
-
-  pageProps: {
-    jitsuConf?: JitsuOptions;
-    jitsuHost?: string;
-    envs: Record<string, string>;
-    user?: any;
-  };
+	params: { locale: string };
+
+	pageProps: {
+		jitsuConf?: JitsuOptions;
+		jitsuHost?: string;
+		envs: Record<string, string>;
+		user?: any;
+	};
 }
 
 const poppins = Poppins({
-  subsets: ['latin'],
-  weight: '500',
-  variable: '--font-poppins',
-  display: 'swap'
+	subsets: ['latin'],
+	weight: '500',
+	variable: '--font-poppins',
+	display: 'swap'
 });
 
-const PostHogPageView = dynamic(
-  () => import('./integration/posthog/page-view'),
-  {
-    ssr: false
-  }
-);
+const PostHogPageView = dynamic(() => import('./integration/posthog/page-view'), {
+	ssr: false
+});
 
 // export function generateStaticParams() {
 // 	return locales.map((locale: any) => ({ locale }));
@@ -75,67 +57,63 @@ const PostHogPageView = dynamic(
 // }
 
 const LocaleLayout = ({ children, params: { locale }, pageProps }: PropsWithChildren<Props>) => {
-  // Validate that the incoming `locale` parameter is valid
-  if (!locales.includes(locale as string)) notFound();
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const { isApiWork, loading } = useCheckAPI();
-  // Enable static rendering
-  // unstable_setRequestLocale(locale);
-  const formatTitle = (url: string) => {
-    // Separate the URL into pathname and query parts
-    const [pathname, queryString] = url.split('?');
-
-    // Ignore language codes or any initial two-letter or specific codes like 'ru', 'ur'
-    const segments = pathname
-      .split('/')
-      .filter((seg) => seg && seg.length > 2)
-      .map((seg) => {
-        // Replace dashes with spaces in the segment if it looks like a UUID or has digits (likely an ID)
-        if (seg.includes('-') || /\d/.test(seg)) {
-          return ''; // Exclude IDs from title
-        }
-        return seg.charAt(0).toUpperCase() + seg.slice(1).toLowerCase(); // Capitalize non-ID segments
-      })
-      .filter((seg: string) => seg); // Remove empty strings resulting from ID exclusion
-
-    // Process query parameters, specifically looking for 'name'
-    let namePart = '';
-    if (queryString) {
-      const params = new URLSearchParams(queryString);
-      if (params?.get('name')) {
-        const name = params.get('name') ?? '';
-        const nameValue =
-          name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
-        namePart = nameValue;
-      }
-    }
-
-    // Combine the pathname segments with the name part, if present
-    const title = [...segments, namePart].filter((part) => part).join(' | ');
-
-    return title;
-  };
-
-  const name = searchParams?.get('name');
-
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const messages = require(`../../locales/${locale}.json`);
-
-  useEffect(() => {
-    if (!isApiWork && !loading) router.push(`/maintenance`);
-    else if (isApiWork && pathname?.split('/').reverse()[0] === 'maintenance')
-      router.replace('/');
-  }, [isApiWork, loading, router, pathname]);
-  return (
-    <html lang={locale} className={poppins.variable}>
-      <head>
-        <title>
-          {formatTitle(`${pathname}${name ? `?name=${name}` : ''}`) || 'Home'}
-        </title>
-      </head>
-      {/* <head>
+	// Validate that the incoming `locale` parameter is valid
+	if (!locales.includes(locale as string)) notFound();
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const { isApiWork, loading } = useCheckAPI();
+	// Enable static rendering
+	// unstable_setRequestLocale(locale);
+	const formatTitle = (url: string) => {
+		// Separate the URL into pathname and query parts
+		const [pathname, queryString] = url.split('?');
+
+		// Ignore language codes or any initial two-letter or specific codes like 'ru', 'ur'
+		const segments = pathname
+			.split('/')
+			.filter((seg) => seg && seg.length > 2)
+			.map((seg) => {
+				// Replace dashes with spaces in the segment if it looks like a UUID or has digits (likely an ID)
+				if (seg.includes('-') || /\d/.test(seg)) {
+					return ''; // Exclude IDs from title
+				}
+				return seg.charAt(0).toUpperCase() + seg.slice(1).toLowerCase(); // Capitalize non-ID segments
+			})
+			.filter((seg: string) => seg); // Remove empty strings resulting from ID exclusion
+
+		// Process query parameters, specifically looking for 'name'
+		let namePart = '';
+		if (queryString) {
+			const params = new URLSearchParams(queryString);
+			if (params?.get('name')) {
+				const name = params.get('name') ?? '';
+				const nameValue = name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+				namePart = nameValue;
+			}
+		}
+
+		// Combine the pathname segments with the name part, if present
+		const title = [...segments, namePart].filter((part) => part).join(' | ');
+
+		return title;
+	};
+
+	const name = searchParams?.get('name');
+
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const messages = require(`../../locales/${locale}.json`);
+
+	useEffect(() => {
+		if (!isApiWork && !loading) router.push(`/maintenance`);
+		else if (isApiWork && pathname?.split('/').reverse()[0] === 'maintenance') router.replace('/');
+	}, [isApiWork, loading, router, pathname]);
+	return (
+		<html lang={locale} className={poppins.variable}>
+			<head>
+				<title>{formatTitle(`${pathname}${name ? `?name=${name}` : ''}`) || 'Home'}</title>
+			</head>
+			{/* <head>
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
 				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
 				{GA_MEASUREMENT_ID.value && (
@@ -150,39 +128,35 @@ const LocaleLayout = ({ children, params: { locale }, pageProps }: PropsWithChil
 					</>
 				)}
 			</head> */}
-      <NextIntlClientProvider
-        locale={locale}
-        messages={messages}
-        timeZone="Asia/Kolkata"
-      >
-        <PHProvider>
-          <body className={clsx('flex h-full flex-col dark:bg-[#191A20]')}>
-            <PostHogPageView />
-
-            <NextAuthSessionProvider>
-              <Provider>
-                <ThemeProvider
-                  attribute="class"
-                  defaultTheme="system"
-                  enableSystem
-                  disableTransitionOnChange
-                >
-                  {loading && !pathname?.startsWith('/auth') ? (
-                    <GlobalSkeleton />
-                  ) : (
-                    <>
-                      <AppState />
-                      <JitsuRoot pageProps={pageProps}>{children}</JitsuRoot>
-                    </>
-                  )}
-                </ThemeProvider>
-              </Provider>
-            </NextAuthSessionProvider>
-          </body>
-        </PHProvider>
-      </NextIntlClientProvider>
-    </html>
-  );
+			<NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Kolkata">
+				<PHProvider>
+					<body className={clsx('flex h-full flex-col overflow-x-hidden min-w-fit w-full dark:bg-[#191A20]')}>
+						<PostHogPageView />
+
+						<NextAuthSessionProvider>
+							<Provider>
+								<ThemeProvider
+									attribute="class"
+									defaultTheme="system"
+									enableSystem
+									disableTransitionOnChange
+								>
+									{loading && !pathname?.startsWith('/auth') ? (
+										<GlobalSkeleton />
+									) : (
+										<>
+											<AppState />
+											<JitsuRoot pageProps={pageProps}>{children}</JitsuRoot>
+										</>
+									)}
+								</ThemeProvider>
+							</Provider>
+						</NextAuthSessionProvider>
+					</body>
+				</PHProvider>
+			</NextIntlClientProvider>
+		</html>
+	);
 };
 
 export default LocaleLayout;
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
@@ -62,7 +62,7 @@ function MainPage() {
 	}
 	return (
 		<>
-			<div className="flex flex-col justify-between h-screen">
+			<div className="flex flex-col justify-between h-full min-h-screen">
 				{/* <div className="flex-grow "> */}
 				<MainLayout
 					showTimer={headerSize <= 11.8 && isTrackingEnabled}
@@ -119,12 +119,8 @@ function MainPage() {
 							<ResizableHandle withHandle />
 
 							{/* </Container> */}
-							<ResizablePanel
-								defaultSize={65}
-								maxSize={95}
-								className="!overflow-y-scroll custom-scrollbar"
-							>
-								<div>{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
+							<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-auto custom-scrollbar">
+								{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
 							</ResizablePanel>
 						</ResizablePanelGroup>
 					</div>