Merge pull request #2053 from ever-co/develop

Release

.cspell.json

@@ -143,6 +143,7 @@
 		"apistage",
 		"flaticon",
 		"VERSONS",
+		"vertificalline",
 		"Tongatapu",
 		"Moresby",
 		"Pago",
@@ -300,19 +301,24 @@
 		"Chami",
 		"Mazen",
 		"Heinze",
+		"Kanbanboard",
+		"Kolkata",
 		"Holmgren",
 		"Jamon",
 		"Rickert",
 		"Metral",
 		"subsquently",
 		"Syle",
+		"teamtask",
 		"imagebutton",
 		"hwba",
 		"plasmohq",
 		"Proguard",
 		"horcrux",
 		"dimesions",
-		"Ordereds"
+		"Ordereds",
+		"uidotdev",
+		"usehooks"
 	],
 	"useGitignore": true,
 	"ignorePaths": [

apps/web/app/[locale]/kanban/page.tsx

@@ -15,6 +15,7 @@ import Image from 'next/image';
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
+import { OT_Member } from '@app/interfaces';
 
 const Kanban = () => {
 	const { data } = useKanban();
@@ -33,7 +34,8 @@ const Kanban = () => {
 	];
 
 	const imageRadius = 20;
-	const numberOfImagesDisplayed = 4;
+	const numberOfImagesDisplayed = 3;
+
 	const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
 	const totalLength = (activeTeamMembers.length + 1) * imageRadius;
 
@@ -47,32 +49,37 @@ const Kanban = () => {
 						<div className="flex flex-row items-center gap-[12px]">
 							<p>08:00 ( UTC +04:30 )</p>
 							<VerticalLine />
-							<div className="relative ">
+							<div className="relative">
 								<div
 									className="flex h-fit flex-row justify-end items-center relative "
 									style={{
-										width: `${totalLength}px`
+										width: `${activeTeamMembers.length < 4 ? totalLength : (100)}px`
 									}}
 								>
-									{activeTeamMembers.map((image: any, index: number) => {
-										if (index < numberOfImagesDisplayed) {
+									{activeTeamMembers.filter((_:any, index: number) => {
+										return index < numberOfImagesDisplayed
+									}).map((image: OT_Member, index: number) => {
 											return (
-												<div className="relative w-[40px] h-[40px]" key={index}>
-													<Image
-														src={image.employee.user.imageUrl}
-														alt={image.title}
-														fill={true}
-														className="absolute rounded-full border-2 border-white"
-														style={stackImages(index, activeTeamMembers.length)}
-													/>
+												<div 
+													key={index}
+													className="h-fit w-fit absolute" 
+													style={stackImages(index, (activeTeamMembers.length < numberOfImagesDisplayed ? activeTeamMembers.length : (numberOfImagesDisplayed + 1)))}
+												>
+													<div className="relative w-[40px] h-[40px]" key={index}>
+														<Image
+															src={image.employee.user ? image.employee.user.imageUrl : ""}
+															alt={""}
+															fill={true}
+															className="rounded-full border-2 border-white"
+														/>
+													</div>
 												</div>
 											);
-										}
 									})}
-									{activeTeamMembers.length > 4 && (
+									{activeTeamMembers.length > numberOfImagesDisplayed && (
 										<div
-											className="flex flex-row text-sm text-[#282048] dark:text-white font-semibold items-center justify-center absolute h-[40px] w-[40px] rounded-full border-2 border-[#0000001a] dark:border-white bg-white dark:bg-[#191A20]"
-											style={stackImages(4, activeTeamMembers.length)}
+											className="flex flex-row text-sm text-[#282048] dark:text-white border-2 border-[#0000001a] dark:border-white bg-white dark:bg-transparent rounded-full font-semibold items-center justify-center z-20 h-[40px] w-[40px]"
+											style={stackImages(3, 4)}
 										>
 											{activeTeamMembers.length - numberOfImagesDisplayed}+
 										</div>

apps/web/app/[locale]/page.tsx

@@ -23,7 +23,7 @@ import { useState } from 'react';
 import { IssuesView } from '@app/constants';
 import { TableCellsIcon, QueueListIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { useNetworkState } from '@uidotdev/usehooks';
-import KanbanIcon from '@components/ui/svgs/kanaban';
+import KanbanIcon from '@components/ui/svgs/kanban';
 import Offline from '@components/pages/offline';
 import UserTeamTableHeader from 'lib/features/team/user-team-table/user-team-table-header';
 import { useTranslations } from 'next-intl';
@@ -51,7 +51,10 @@ function MainPage({ pageProps }: AppProps<MyAppProps>) {
 
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
 
-	const breadcrumb = [{title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/'}, { title: activeTeam?.name || '', href:'/'}];
+	const breadcrumb = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: activeTeam?.name || '', href: '/' }
+	];
 	const [view, setView] = useState<IssuesView>(IssuesView.CARDS);
 	const { online } = useNetworkState();
 
@@ -137,7 +140,7 @@ function MainPage({ pageProps }: AppProps<MyAppProps>) {
 								</Tooltip>
 								<Tooltip label={'Kanban'} placement="top-start">
 									<Link
-										href={'/en/kanban'}
+										href={'/kanban'}
 										className={clsxm(
 											'rounded-md px-3 py-1 text-sm font-medium',
 											view === IssuesView.KANBAN

apps/web/app/hooks/features/useLanguageSettings.ts

@@ -35,13 +35,14 @@ export function useLanguageSettings() {
 		if (language) {
 			changeLanguage(language);
 		}
-	}, []);
+	}, [changeLanguage, user]);
+
 	const loadLanguagesData = useCallback(() => {
 		setActiveLanguageId(getActiveLanguageIdCookie());
 		if (user) {
-			return queryCall(user.role.isSystem).then((res) => {
+			return queryCall(user.role.isSystem).then((res) => {				
 				setLanguages(
-					res?.data?.data?.items.filter((item: any) => APPLICATION_LANGUAGES_CODE.includes(item.code)) || []
+					res?.data?.items.filter((item: any) => APPLICATION_LANGUAGES_CODE.includes(item.code)) || []
 				);
 				return res;
 			});

apps/web/app/hooks/useLanguage.ts

@@ -28,6 +28,7 @@ export function useLanguage() {
 				// Navigation to force rerender
 				// router.push({ pathname: router.pathname, query: router.query }, undefined, { locale: newLanguage });
 			}
+			// router.refresh();
 		},
 		[router, i18n]
 	);

apps/web/lib/settings/personal-setting-form.tsx

@@ -19,6 +19,7 @@ import validator from 'validator';
 import { EmailResetModal } from './email-reset-modal';
 import { LanguageDropDown } from './language-dropdown';
 import { TimezoneDropDown } from './timezone-dropdown';
+import { useRouter } from 'next/navigation';
 
 interface IValidation {
 	email: boolean;
@@ -41,6 +42,7 @@ export const PersonalSettingForm = () => {
 		phone: true
 	});
 	const t = useTranslations();
+	const router = useRouter();
 
 	const handleFullnameChange = useCallback(() => {
 		const values = getValues();
@@ -137,8 +139,10 @@ export const PersonalSettingForm = () => {
 					id: user.id
 				});
 			}
+
+			router.replace(`/${newLanguage}/settings/personal`);
 		},
-		[user, setValue, updateAvatar, changeLanguage]
+		[user, setValue, updateAvatar, changeLanguage, router]
 	);
 
 	return (

apps/web/middleware.ts

@@ -16,13 +16,14 @@ export const config = {
 	matcher: [
 		'/',
 		'/(en|de|ar|bg|zh|nl|de|he|it|pl|pt|ru|es|fr)/:path*',
-		// '/((?!_next|_vercel|.*\\..*).*)',
+		'/((?!api|_next|_vercel|.*\\..*).*)',
 		'/auth/(.*)',
 		'/profile/:path*',
 		'/settings/(.*)',
 		'/task(.*)',
 		'/meet(.*)',
-		'/board(.*)'
+		'/board(.*)',
+		'/kanban(.*)'
 	]
 };
 
@@ -31,7 +32,7 @@ export async function middleware(request: NextRequest) {
 		defaultLocale: 'en',
 		locales: ['en', 'de', 'ar', 'bg', 'zh', 'nl', 'de', 'he', 'it', 'pl', 'pt', 'ru', 'es', 'fr'],
 		// pathnames,
-		localePrefix: 'never'
+		localePrefix: 'as-needed'
 	});
 
 	// Setting cookies on the response