[Perf] Introduce server side pagination for tasks table and Lazy load…

…ing (#8243)

* feat: create routing for tabs

* feat: improve lanaguage service

* feat: create cached server data server

* feat: caching task for 24 hours

* feat: add new observable to `selectorService`

* feat: change modidier private to public

* feat: improve create task dialog

* feat: create task table features

* feat: replace table with router tabset

* fix: deepscan

apps/desktop-timer/src/app/app.module.ts

@@ -22,6 +22,7 @@ import {
 	LanguageInterceptor,
 	LanguageModule,
 	LoggerService,
+	NgxDesktopThemeModule,
 	NgxLoginModule,
 	NoAuthGuard,
 	OrganizationInterceptor,
@@ -34,14 +35,14 @@ import {
 	SetupModule,
 	SplashScreenModule,
 	Store,
+	TaskTableModule,
 	TenantInterceptor,
 	TimeTrackerModule,
 	TimeoutInterceptor,
 	TokenInterceptor,
 	UnauthorizedInterceptor,
 	UpdaterModule,
-	serverConnectionFactory,
-	NgxDesktopThemeModule
+	serverConnectionFactory
 } from '@gauzy/desktop-ui-lib';
 import { environment as gauzyEnvironment } from '@gauzy/ui-config';
 import {
@@ -117,7 +118,8 @@ if (environment.SENTRY_DSN) {
 		NbDatepickerModule.forRoot(),
 		AboutModule,
 		ActivityWatchModule,
-		RecapModule
+		RecapModule,
+		TaskTableModule
 	],
 	providers: [
 		AppService,
@@ -198,7 +200,7 @@ if (environment.SENTRY_DSN) {
 		},
 		{
 			provide: APP_INITIALIZER,
-			useFactory: () => () => { },
+			useFactory: () => () => {},
 			deps: [Sentry.TraceService],
 			multi: true
 		},
@@ -214,4 +216,4 @@ if (environment.SENTRY_DSN) {
 	bootstrap: [AppComponent],
 	exports: []
 })
-export class AppModule { }
+export class AppModule {}

packages/desktop-ui-lib/src/index.ts

@@ -12,8 +12,8 @@ export * from './lib/image-viewer/image-viewer.component';
 export * from './lib/image-viewer/image-viewer.module';
 export * from './lib/integrations';
 export * from './lib/interceptors';
-export * from './lib/language/language.module';
 export * from './lib/language/language-electron.service';
+export * from './lib/language/language.module';
 export * from './lib/ngx-translate';
 export * from './lib/recap/recap-routing.module';
 export * from './lib/recap/recap.module';
@@ -31,13 +31,14 @@ export * from './lib/setup/setup.module';
 export * from './lib/setup/setup.service';
 export * from './lib/splash-screen/splash-screen.component';
 export * from './lib/splash-screen/splash-screen.module';
+export * from './lib/theme';
 export * from './lib/time-tracker/organization-selector/user-organization.service';
+export * from './lib/time-tracker/task-table/task-table.module';
 export * from './lib/time-tracker/time-tracker.component';
 export * from './lib/time-tracker/time-tracker.module';
 export * from './lib/time-tracker/time-tracker.service';
 export * from './lib/updater/updater.component';
 export * from './lib/updater/updater.module';
-export * from './lib/theme';
 /**
  * Auth Module
  */

packages/desktop-ui-lib/src/lib/language/language-electron.service.ts

@@ -20,22 +20,13 @@ export class LanguageElectronService {
 	) {}
 
 	public initialize<T>(callback?: T) {
-		this.electronService.ipcRenderer.on('preferred_language_change', (event, language: LanguagesEnum) => {
-			this.ngZone.run(() => {
-				this.languageSelectorService.setLanguage(language, this.translateService);
-				TimeTrackerDateManager.locale(language);
-				if (callback) {
-					callback;
-				}
-			});
-		});
+		this.onLanguageChange(callback);
 
 		from(this.electronService.ipcRenderer.invoke('PREFERRED_LANGUAGE'))
 			.pipe(
 				tap((language: LanguagesEnum) => {
 					this.languageSelectorService.setLanguage(language, this.translateService);
 					TimeTrackerDateManager.locale(language);
-					console.log('PREFERRED_LANGUAGE', language);
 					if (callback) {
 						callback;
 					}
@@ -44,4 +35,16 @@ export class LanguageElectronService {
 			)
 			.subscribe();
 	}
+
+	public onLanguageChange<T>(callback?: T) {
+		this.electronService.ipcRenderer.on('preferred_language_change', (event, language: LanguagesEnum) => {
+			this.ngZone.run(() => {
+				this.languageSelectorService.setLanguage(language, this.translateService);
+				TimeTrackerDateManager.locale(language);
+				if (callback) {
+					callback;
+				}
+			});
+		});
+	}
 }

packages/desktop-ui-lib/src/lib/recap/monthly/features/monthly-statistic/monthly-statistic.component.scss

@@ -25,6 +25,7 @@ nb-card {
 	line-height: 44px;
 	letter-spacing: 0;
 	text-wrap: nowrap;
+	margin: 0;
 }
 
 .h2 {

packages/desktop-ui-lib/src/lib/recap/recap-routing.module.ts

@@ -4,14 +4,30 @@ export const recapRoutes: Routes = [
 	{
 		path: '',
 		pathMatch: 'full',
-		redirectTo: 'daily'
+		redirectTo: 'tasks'
 	},
 	{
 		path: 'daily',
+		loadComponent: () => import('./features/recap/recap.component').then((m) => m.RecapComponent),
 		loadChildren: () => import('./recap-children-routing.module').then((m) => m.recapChildRoutes)
 	},
+	{
+		path: 'weekly',
+		loadComponent: () =>
+			import('./weekly/features/weekly-recap/weekly-recap.component').then((m) => m.WeeklyRecapComponent)
+	},
+	{
+		path: 'monthly',
+		loadComponent: () =>
+			import('./monthly/features/monthly-recap/monthly-recap.component').then((m) => m.MonthlyRecapComponent)
+	},
+	{
+		path: 'tasks',
+		loadChildren: () =>
+			import('../time-tracker/task-table/task-table.routing.module').then((m) => m.taskTableRoutes)
+	},
 	{
 		path: '**',
-		redirectTo: 'daily'
+		redirectTo: 'tasks'
 	}
 ];

packages/desktop-ui-lib/src/lib/recap/shared/features/activity-report/activity-report.component.scss

@@ -6,7 +6,7 @@
 	padding-bottom: 10px;
 	background-color: var(--gauzy-card-1);
 	border-radius: var(--border-radius);
-	height: calc(100vh - 22.625rem);
+	height: calc(100vh - 23.625rem);
 	overflow-y: auto;
 
 	.table-row-custom {
@@ -96,7 +96,7 @@
 }
 
 .main-report-wrapper {
-	height: calc(100vh - 8rem);
+	height: calc(100vh - 9rem);
 	margin-bottom: 0 !important;
 
 	.main-report-body {

packages/desktop-ui-lib/src/lib/recap/weekly/features/weekly-progress/weekly-progress.component.scss

@@ -34,7 +34,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	padding: 1rem;
+	padding: 14px;
 	border-radius: var(--border-radius);
 	background-color: var(--gauzy-card-3);
 	height: 100%;

packages/desktop-ui-lib/src/lib/recap/weekly/features/weekly-statistic/weekly-statistic.component.scss

@@ -25,6 +25,7 @@ nb-card {
 	line-height: 44px;
 	letter-spacing: 0;
 	text-wrap: nowrap;
+	margin: 0;
 }
 
 .h2 {

packages/desktop-ui-lib/src/lib/services/task-cache.service.ts

@@ -14,5 +14,6 @@ export class TaskCacheService extends AbstractCacheService<ITask[]> {
 	) {
 		super(_storageService, _store);
 		this.prefix = TaskCacheService.name.toString();
+		this.duration = 24 * 3600 * 1000; // 1 day
 	}
 }

packages/desktop-ui-lib/src/lib/shared/+state/selector.service.ts

@@ -41,4 +41,8 @@ export abstract class SelectorService<T> {
 	public get hasPermission$(): Observable<boolean> {
 		return this.selectorQuery.hasPermission$;
 	}
+
+	public get selected$(): Observable<T> {
+		return this.selectorQuery.selected$;
+	}
 }

packages/desktop-ui-lib/src/lib/shared/features/task-selector/+state/task-selector.service.ts

@@ -101,7 +101,7 @@ export class TaskSelectorService extends SelectorService<ITask> {
 		}
 	}
 
-	private merge(tasks: ITask[], statistics: ITasksStatistics[]): (ITask & ITasksStatistics)[] {
+	public merge(tasks: ITask[], statistics: ITasksStatistics[]): (ITask & ITasksStatistics)[] {
 		let arr: (ITask & ITasksStatistics)[] = [];
 		arr = arr.concat(statistics, tasks);
 		return arr.reduce((result, current) => {