Merge pull request #8612 from ever-co/fix/ui-core-circular-dependency

[Fix] UI Core Circular Dependency

apps/gauzy/src/app/pages/projects/components/project-list/list.component.ts

@@ -28,14 +28,14 @@ import {
 	ToastrService
 } from '@gauzy/ui-core/core';
 import {
-	AddProjectModuleDialogComponent,
 	CardGridComponent,
 	ContactLinksComponent,
 	DateViewComponent,
 	DeleteConfirmationComponent,
 	EmployeesMergedTeamsComponent,
 	EmployeeWithLinksComponent,
 	PaginationFilterBaseComponent,
+	ProjectModuleMutationComponent,
 	ProjectOrganizationComponent,
 	ProjectOrganizationEmployeesComponent,
 	ProjectOrganizationGridComponent,
@@ -620,7 +620,7 @@ export class ProjectListComponent extends PaginationFilterBaseComponent implemen
 	public async createProjectModuleDialog(project: IOrganizationProject): Promise<void> {
 		try {
 			const result = await firstValueFrom(
-				this._dialogService.open(AddProjectModuleDialogComponent, {
+				this._dialogService.open(ProjectModuleMutationComponent, {
 					context: {
 						project,
 						createModule: true

apps/gauzy/src/app/pages/projects/projects.module.ts

@@ -16,7 +16,7 @@ import {
 	CardGridModule,
 	EntityWithMembersModule,
 	ProjectMutationModule,
-	AddProjectModuleDialogModule
+	ProjectModuleMutationModule
 } from '@gauzy/ui-core/shared';
 import { ProjectsRoutingModule } from './projects-routing.module';
 import { TableComponentsModule } from '@gauzy/ui-core/shared';
@@ -37,15 +37,15 @@ import { ProjectListComponent } from './components/project-list/list.component';
 		NbSpinnerModule,
 		NbTooltipModule,
 		TranslateModule.forChild(),
+		NgxPermissionsModule.forChild(),
 		ProjectsRoutingModule,
 		TableComponentsModule,
 		EntityWithMembersModule,
 		SharedModule,
 		SmartDataViewLayoutModule,
 		CardGridModule,
 		ProjectMutationModule,
-		AddProjectModuleDialogModule,
-		NgxPermissionsModule.forChild()
+		ProjectModuleMutationModule
 	],
 	declarations: [
 		ProjectLayoutComponent,

packages/ui-core/shared/src/index.ts

@@ -47,6 +47,7 @@ export * from './lib/pipes';
 export * from './lib/pipes/pipes.module';
 export * from './lib/product';
 export * from './lib/project';
+export * from './lib/project-module';
 export * from './lib/proposal-template-select';
 export * from './lib/remove-lodash';
 export * from './lib/regex';

packages/ui-core/shared/src/lib/project-module/index.ts

@@ -0,0 +1,4 @@
+export * from './project-module-mutation/project-module-mutation.component';
+export * from './project-module-mutation/project-module-mutation.module';
+export * from './project-module-table/project-module-table.component';
+export * from './project-module-table/project-module-table.module';

packages/ui-core/shared/src/lib/project/project-module/add-project-module-dialog/add-project-module-dialog.component.html → packages/ui-core/shared/src/lib/project-module/project-module-mutation/project-module-mutation.component.html

@@ -99,6 +99,7 @@ <h5 class="title">
 					</div>
 				</div>
 			</div>
+
 			<!-- Managers Selection -->
 			<div class="row">
 				<div class="col-sm-6">

packages/ui-core/shared/src/lib/project/project-module/add-project-module-dialog/add-project-module-dialog.component.ts → packages/ui-core/shared/src/lib/project-module/project-module-mutation/project-module-mutation.component.ts

@@ -6,7 +6,6 @@ import { CKEditor4 } from 'ckeditor4-angular/ckeditor';
 import { firstValueFrom } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { distinctUntilChange } from '@gauzy/ui-core/common';
 import {
 	IEmployee,
 	IOrganization,
@@ -20,7 +19,7 @@ import {
 	ID,
 	IOrganizationProjectModuleEmployee
 } from '@gauzy/contracts';
-import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
+import { distinctUntilChange } from '@gauzy/ui-core/common';
 import {
 	EmployeesService,
 	OrganizationTeamsService,
@@ -30,15 +29,16 @@ import {
 	TasksService,
 	ToastrService
 } from '@gauzy/ui-core/core';
-import { richTextCKEditorConfig } from '../../../ckeditor.config';
+import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
+import { richTextCKEditorConfig } from '../../ckeditor.config';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
-	selector: 'ngx-add-module-dialog',
-	templateUrl: './add-project-module-dialog.component.html',
-	styleUrls: ['./add-project-module-dialog.component.scss']
+	selector: 'ngx-project-module-mutation',
+	templateUrl: './project-module-mutation.component.html',
+	styleUrl: './project-module-mutation.component.scss'
 })
-export class AddProjectModuleDialogComponent extends TranslationBaseComponent implements OnInit {
+export class ProjectModuleMutationComponent extends TranslationBaseComponent implements OnInit {
 	memberIds: ID[] = [];
 	managerIds: ID[] = [];
 	selectedEmployeeIds: ID[] = [];
@@ -78,7 +78,6 @@ export class AddProjectModuleDialogComponent extends TranslationBaseComponent im
 	}
 	@Input() set projectModule(value: IOrganizationProjectModule) {
 		this._projectModule = value;
-
 		this.populateForm(value);
 	}
 
@@ -92,7 +91,7 @@ export class AddProjectModuleDialogComponent extends TranslationBaseComponent im
 	}
 
 	constructor(
-		public dialogRef: NbDialogRef<AddProjectModuleDialogComponent>,
+		public dialogRef: NbDialogRef<ProjectModuleMutationComponent>,
 		private fb: UntypedFormBuilder,
 		private store: Store,
 		public translateService: TranslateService,

packages/ui-core/shared/src/lib/project/project-module/add-project-module-dialog/add-project-module-dialog.module.ts → packages/ui-core/shared/src/lib/project-module/project-module-mutation/project-module-mutation.module.ts

@@ -16,11 +16,11 @@ import {
 import { CKEditorModule } from 'ckeditor4-angular';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
-import { TaskSelectModule, TaskStatusSelectModule } from '../../../tasks';
-import { ProjectSelectModule, SelectorsModule } from '../../../selectors';
-import { TagsColorInputModule } from '../../../tags';
-import { EmployeeMultiSelectModule } from '../../../employee';
-import { AddProjectModuleDialogComponent } from './add-project-module-dialog.component';
+import { TaskSelectModule, TaskStatusSelectModule } from '../../tasks';
+import { ProjectSelectModule, SelectorsModule } from '../../selectors';
+import { TagsColorInputModule } from '../../tags/tags-color-input/tags-color-input.module';
+import { EmployeeMultiSelectModule } from '../../employee/employee-multi-select/employee-multi-select.module';
+import { ProjectModuleMutationComponent } from './project-module-mutation.component';
 
 @NgModule({
 	imports: [
@@ -47,7 +47,7 @@ import { AddProjectModuleDialogComponent } from './add-project-module-dialog.com
 		TaskSelectModule,
 		TaskStatusSelectModule
 	],
-	declarations: [AddProjectModuleDialogComponent],
-	exports: [AddProjectModuleDialogComponent]
+	declarations: [ProjectModuleMutationComponent],
+	exports: [ProjectModuleMutationComponent]
 })
-export class AddProjectModuleDialogModule {}
+export class ProjectModuleMutationModule {}

packages/ui-core/shared/src/lib/project/project-module/module-table/project-module-table.component.html → packages/ui-core/shared/src/lib/project-module/project-module-table/project-module-table.component.html

@@ -13,11 +13,11 @@
 			[source]="smartTableSource"
 			style="cursor: pointer"
 			#variantTable
-		>
-		</angular2-smart-table>
+		></angular2-smart-table>
 	</div>
 </div>
 
+<!-- Actions -->
 <ng-template #actionButtons>
 	<div class="actions">
 		<button

packages/ui-core/shared/src/lib/project/project-module/module-table/project-module-table.component.scss → packages/ui-core/shared/src/lib/project-module/project-module-table/project-module-table.component.scss

@@ -4,8 +4,7 @@
     .transition-container span {
         background-color: unset;
     }
-
     .actions-container {
         padding-top: 0;
     }
-}
+}

packages/ui-core/shared/src/lib/project-module/project-module-table/project-module-table.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ProjectModuleTableComponent } from './project-module-table.component';
+
+describe('ProjectModuleTableComponent', () => {
+	let component: ProjectModuleTableComponent;
+	let fixture: ComponentFixture<ProjectModuleTableComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [ProjectModuleTableComponent]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(ProjectModuleTableComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

packages/ui-core/shared/src/lib/project/project-module/module-table/project-module-table.component.ts → packages/ui-core/shared/src/lib/project-module/project-module-table/project-module-table.component.ts

@@ -1,66 +1,63 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { first, firstValueFrom, tap } from 'rxjs';
+import { NbDialogService } from '@nebular/theme';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Cell, LocalDataSource } from 'angular2-smart-table';
 import { TranslateService } from '@ngx-translate/core';
-import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
 import { ID, IEmployee, IOrganizationProjectModule, IOrganizationProjectModuleEmployee } from '@gauzy/contracts';
-import { firstValueFrom } from 'rxjs';
-import { first } from 'rxjs/operators';
-import { NbDialogService } from '@nebular/theme';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { OrganizationProjectModuleService, ToastrService } from '@gauzy/ui-core/core';
+import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
 import {
+	StatusViewComponent,
+	ToggleSwitcherComponent,
 	DateViewComponent,
-	DeleteConfirmationComponent,
 	EmployeesMergedTeamsComponent,
 	EmployeeWithLinksComponent,
-	StatusViewComponent,
-	ToggleSwitcherComponent
-} from '../../../../index';
-import { AddProjectModuleDialogComponent } from '../add-project-module-dialog/add-project-module-dialog.component';
+} from '../../table-components';
+import { DeleteConfirmationComponent } from '../../user/forms/delete-confirmation/delete-confirmation.component';
+import { ProjectModuleMutationComponent } from '../project-module-mutation/project-module-mutation.component';
 
-@UntilDestroy()
+@UntilDestroy({ checkProperties: true})
 @Component({
 	selector: 'ngx-project-module-table',
 	templateUrl: './project-module-table.component.html',
-	styleUrls: ['./project-module-table.component.scss']
+	styleUrl: './project-module-table.component.scss'
 })
 export class ProjectModuleTableComponent extends TranslationBaseComponent implements OnInit {
-	private _projectId: ID;
+	public modules: IOrganizationProjectModule[] = [];
+	public selectedItem: IOrganizationProjectModule;
+	public settingsSmartTable: object;
+	public smartTableSource = new LocalDataSource();
+	public loading: boolean = true;
+	public disableButton: boolean = true;
 
 	/**
 	 * Project ID to fetch modules for.
 	 * Uses getter and setter to detect changes and reload data if needed.
 	 */
-	@Input()
+	private _projectId: ID;
 	get projectId(): ID {
 		return this._projectId;
 	}
-	set projectId(value: ID) {
+	@Input() set projectId(value: ID) {
 		if (value !== this._projectId) {
 			this._projectId = value;
 			this.loadModules();
 		}
 	}
 
-	modules: IOrganizationProjectModule[] = [];
-	selectedItem: IOrganizationProjectModule;
-	settingsSmartTable: object;
-	smartTableSource = new LocalDataSource();
-	loading = true;
-	disableButton = true;
-
 	constructor(
-		readonly translateService: TranslateService,
-		private dialogService: NbDialogService,
-		private toastrService: ToastrService,
-		private organizationProjectModuleService: OrganizationProjectModuleService
+		public readonly translateService: TranslateService,
+		private readonly dialogService: NbDialogService,
+		private readonly toastrService: ToastrService,
+		private readonly organizationProjectModuleService: OrganizationProjectModuleService
 	) {
 		super(translateService);
 	}
 
-	async ngOnInit() {
-		this.loadSmartTable();
+	ngOnInit() {
 		this._applyTranslationOnSmartTable();
+		this._loadSmartTableSettings();
 	}
 
 	/**
@@ -72,7 +69,6 @@ export class ProjectModuleTableComponent extends TranslationBaseComponent implem
 		}
 
 		this.loading = true;
-
 		try {
 			const { items } = await firstValueFrom(
 				this.organizationProjectModuleService.getAllModulesByProjectId({ projectId: this.projectId }, [
@@ -106,7 +102,7 @@ export class ProjectModuleTableComponent extends TranslationBaseComponent implem
 	/**
 	 * Configures the settings for the Smart Table.
 	 */
-	loadSmartTable() {
+	_loadSmartTableSettings() {
 		this.settingsSmartTable = {
 			actions: false,
 			columns: {
@@ -217,7 +213,7 @@ export class ProjectModuleTableComponent extends TranslationBaseComponent implem
 	 * Opens the edit dialog for the selected project module.
 	 */
 	async onEditProjectModuleDialog() {
-		const dialogRef = this.dialogService.open(AddProjectModuleDialogComponent, {
+		const dialogRef = this.dialogService.open(ProjectModuleMutationComponent, {
 			context: {
 				projectModule: this.selectedItem,
 				createModule: false
@@ -238,6 +234,7 @@ export class ProjectModuleTableComponent extends TranslationBaseComponent implem
 
 	/**
 	 * Updates a module's properties and reloads the table if successful.
+	 *
 	 * @param id Module ID.
 	 * @param changes Object containing the updated fields.
 	 */
@@ -252,12 +249,16 @@ export class ProjectModuleTableComponent extends TranslationBaseComponent implem
 	}
 
 	/**
-	 * Applies translations dynamically on Smart Table columns when the language changes.
+	 * Listens for language changes and triggers the loading of Smart Table settings.
+	 * Unsubscribes when the component is destroyed.
 	 */
-	private _applyTranslationOnSmartTable() {
-		this.translateService.onLangChange.pipe(untilDestroyed(this)).subscribe(() => {
-			this.loadSmartTable();
-		});
+	private _applyTranslationOnSmartTable(): void {
+		this.translateService.onLangChange
+			.pipe(
+				tap(() => this._loadSmartTableSettings()),
+				untilDestroyed(this)
+			)
+			.subscribe();
 	}
 
 	/**

packages/ui-core/shared/src/lib/project-module/project-module-table/project-module-table.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbSpinnerModule } from '@nebular/theme';
+import { SmartDataViewLayoutModule } from '../../smart-data-layout';
+import { ProjectModuleTableComponent } from './project-module-table.component';
+import { ProjectModuleMutationModule } from '../project-module-mutation/project-module-mutation.module';
+
+@NgModule({
+	declarations: [ProjectModuleTableComponent],
+	exports: [ProjectModuleTableComponent],
+	imports: [CommonModule, NbSpinnerModule, ProjectModuleMutationModule, SmartDataViewLayoutModule]
+})
+export class ProjectModuleTableModule {}

packages/ui-core/shared/src/lib/project/index.ts

@@ -1,3 +1,2 @@
 export * from './project-mutation/project-mutation.module';
 export * from './project-mutation/project-mutation.component';
-export * from './project-module';