feat: generate invoice items by project hours (#125)

Author: YanaYestr

apps/gauzy/src/app/pages/invoices/invoice-add/by-role/invoice-add-by-role.component.html

@@ -189,24 +189,9 @@ <h4>{{ (isEstimate ? 'INVOICES_PAGE.ADD_ESTIMATE' : 'INVOICES_PAGE.ADD_INVOICE')
 							</div>
 						</ng-container>
 
-						<ng-container *ngIf="isEmployeeHourTable && selectedEmployee">
-							<div class="col-sm-6">
-								<div class="form-group">
-									<label for="selectedDateRange" class="label"
-										>{{ 'INVOICES_PAGE.SELECT_DATE_RANGE' | translate }}
-									</label>
-									<ngx-date-range-picker
-										[arrows]="false"
-										[firstDayOfWeek]="organization.startWeekOn"
-										class="date-range-selector"
-									></ngx-date-range-picker>
-								</div>
-							</div>
-						</ng-container>
-
 						<div class="col-sm-6" *ngIf="isProjectHourTable">
 							<div class="form-group">
-								<label for="inputProject" class="label">
+								<label for="inputProject" class="label required-asterisk">
 									{{ 'INVOICES_PAGE.INVOICE_TYPE.SELECT_PROJECTS' | translate }}
 								</label>
 								<ng-select
@@ -218,6 +203,7 @@ <h4>{{ (isEstimate ? 'INVOICES_PAGE.ADD_ESTIMATE' : 'INVOICES_PAGE.ADD_INVOICE')
 									(change)="selectProject($event)"
 									[multiple]="true"
 									appendTo="body"
+									class="project-hours"
 								>
 									<ng-template ng-option-tmp let-item="item" let-index="index">
 										{{ item.name }}
@@ -228,8 +214,30 @@ <h4>{{ (isEstimate ? 'INVOICES_PAGE.ADD_ESTIMATE' : 'INVOICES_PAGE.ADD_INVOICE')
 										</div>
 									</ng-template>
 								</ng-select>
+								<div
+									*ngIf="form.get('project')?.errors?.required && form.get('project')?.touched"
+									class="invalid-feedback d-block"
+								>
+									{{ 'INVOICES_PAGE.VALIDATION.REQUIRED_PROJECT' | translate }}
+								</div>
 							</div>
 						</div>
+
+						<ng-container *ngIf="(isEmployeeHourTable || isProjectHourTable) && selectedEmployee">
+							<div class="col-sm-6">
+								<div class="form-group">
+									<label for="selectedDateRange" class="label"
+										>{{ 'INVOICES_PAGE.SELECT_DATE_RANGE' | translate }}
+									</label>
+									<ngx-date-range-picker
+										[arrows]="false"
+										[firstDayOfWeek]="organization.startWeekOn"
+										class="date-range-selector"
+									></ngx-date-range-picker>
+								</div>
+							</div>
+						</ng-container>
+
 						<div class="col-sm-6" *ngIf="isTaskHourTable">
 							<div class="form-group">
 								<label for="inputTask" class="label">

apps/gauzy/src/app/pages/invoices/invoice-add/by-role/invoice-add-by-role.component.scss

@@ -31,3 +31,14 @@ $shadow: 0 0 0 nb-theme(button-outline-width)
   color: nb-theme(button-outline-basic-disabled-text-color);
   box-shadow: unset;
 }
+
+:host ::ng-deep .ng-select.project-hours.ng-select-multiple {
+  .ng-select-container {
+    min-height: 42px !important;
+    height: auto !important;
+  }
+
+  input {
+    height: 100% !important;
+  }
+}

apps/gauzy/src/app/pages/invoices/invoice-add/by-role/invoice-add-by-role.component.ts

@@ -21,7 +21,8 @@ import {
 	IReportDayData,
 	IReportDayGroupByEmployee,
 	IGetEmployeeHourlyRateInput,
-	IEmployeeHourlyRate
+	IEmployeeHourlyRate,
+	IReportDayGroupByProject
 } from '@gauzy/contracts';
 import { filter, tap } from 'rxjs/operators';
 import { compareDate, distinctUntilChange, extractNumber, isEmpty, isNotEmpty } from '@gauzy/ui-core/common';
@@ -52,6 +53,7 @@ import { InvoiceExpensesSelectorComponent } from '../../table-components/invoice
 import {
 	InvoiceApplyTaxDiscountComponent,
 	InvoiceProductsSelectorComponent,
+	InvoiceProjectFilterComponent,
 	InvoiceProjectsSelectorComponent,
 	InvoiceTasksSelectorComponent
 } from '../../table-components';
@@ -231,6 +233,26 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 			selectedEmployee: [{ value: this.selectedEmployee?.name, disabled: true }],
 			tags: []
 		});
+
+		this.subscribeInvoiceTypeChanges();
+	}
+
+	private subscribeInvoiceTypeChanges() {
+		this.form
+			.get('invoiceType')
+			?.valueChanges.pipe(untilDestroyed(this))
+			.subscribe((value) => {
+				const projectControl = this.form.get('project');
+
+				if (value === InvoiceTypeEnum.BY_PROJECT_HOURS) {
+					projectControl?.setValidators(Validators.required);
+				} else {
+					projectControl?.clearValidators();
+					projectControl?.setValue(null);
+				}
+
+				projectControl?.updateValueAndValidity();
+			});
 	}
 
 	loadSmartTable() {
@@ -286,8 +308,17 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 						component: InvoiceProjectsSelectorComponent
 					},
 					valuePrepareFunction: (cell) => {
-						const project = cell;
-						return `${project.name}`;
+						return cell?.name ?? '';
+					},
+					filter: {
+						type: 'custom',
+						component: InvoiceProjectFilterComponent
+					},
+					filterFunction: (value, search) => {
+						if (!search || !value) {
+							return true;
+						}
+						return value.name.toLowerCase().includes(search.toLowerCase());
 					}
 				};
 				break;
@@ -714,7 +745,7 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 		}
 	}
 
-	private loadInvoiceTimeLogsData(): Observable<number> {
+	private loadInvoiceTimeLogsDataByEmployee(): Observable<number> {
 		const request: IGetInvoiceTimeLogs = {
 			organizationId: this.organization?.id,
 			tenantId: this.store.user.tenantId,
@@ -739,6 +770,35 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 		);
 	}
 
+	private loadInvoiceTimeLogsDataByProjects(): Observable<{
+		[projectId: string]: number;
+	}> {
+		const request: IGetInvoiceTimeLogs = {
+			organizationId: this.organization?.id,
+			tenantId: this.store.user.tenantId,
+			startDate: this.selectedDateRange.startDate.toISOString(),
+			endDate: this.selectedDateRange.endDate.toISOString(),
+			employeeIds: [this.selectedEmployee?.employee?.id],
+			groupBy: 'project',
+			relations: ['project']
+		};
+
+		return this.invoiceTimeLogsService.getInvoiceTimeLogs(request).pipe(
+			map((data: IReportDayGroupByProject[]) => {
+				const projectSums: { [projectId: string]: number } = {};
+
+				data.forEach((item) => {
+					if (item.project) {
+						projectSums[item.project.id] = this.hoursDurationFormatPipe.transform(item.sum);
+					}
+				});
+
+				return projectSums;
+			}),
+			untilDestroyed(this)
+		);
+	}
+
 	private loadInvoiceEmployeeRateData(): Observable<number> {
 		const request: IGetEmployeeHourlyRateInput = {
 			organizationId: this.organization.id,
@@ -785,15 +845,6 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 		this._getInvoiceNumber();
 	}
 
-	private getAllProjects() {
-		const { id: organizationId } = this.organization;
-		const { tenantId } = this.store.user;
-
-		this.organizationProjectsService.getAll([], { organizationId, tenantId }).then(({ items }) => {
-			this.projects = JSON.parse(JSON.stringify(items));
-		});
-	}
-
 	private getAllProducts() {
 		const { id: organizationId } = this.organization;
 		const { tenantId } = this.store.user;
@@ -820,7 +871,7 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 			});
 	}
 
-	onTypeChange($event) {
+	async onTypeChange($event) {
 		this.invoiceType = $event;
 
 		this.isEmployeeHourTable = false;
@@ -835,7 +886,11 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 				break;
 			case InvoiceTypeEnum.BY_PROJECT_HOURS:
 				this.isProjectHourTable = true;
-				this.getAllProjects();
+				this.projects = await this.organizationProjectsService.getAssignedProjects(
+					this.organization?.id,
+					this.store.user?.tenantId,
+					this.store.user?.employee?.id
+				);
 				break;
 			case InvoiceTypeEnum.BY_TASK_HOURS:
 				this.isTaskHourTable = true;
@@ -887,11 +942,11 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 					break;
 				case InvoiceTypeEnum.BY_PROJECT_HOURS:
 					if (isNotEmpty(this.selectedProjects)) {
+						const { timeMap, rate } = await this.getProjectsData();
 						for (const project of this.selectedProjects) {
-							const data = this.createInvoiceData(project, fakePrice, fakeQuantity);
+							const time = timeMap[project.id] ?? 0;
+							const data = this.createInvoiceData(project, rate, time);
 							invoiceData.push(data);
-							fakePrice++;
-							fakeQuantity++;
 						}
 					}
 					break;
@@ -953,7 +1008,7 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 	private getEmployeeData() {
 		return new Promise<{ time: number; rate: number }>((resolve, reject) => {
 			forkJoin({
-				time: this.loadInvoiceTimeLogsData(),
+				time: this.loadInvoiceTimeLogsDataByEmployee(),
 				rate: this.loadInvoiceEmployeeRateData()
 			})
 				.pipe(untilDestroyed(this))
@@ -969,6 +1024,30 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 		});
 	}
 
+	private getProjectsData() {
+		return new Promise<{
+			timeMap: {
+				[projectId: string]: number;
+			};
+			rate: number;
+		}>((resolve, reject) => {
+			forkJoin({
+				timeMap: this.loadInvoiceTimeLogsDataByProjects(),
+				rate: this.loadInvoiceEmployeeRateData()
+			})
+				.pipe(untilDestroyed(this))
+				.subscribe({
+					next: ({ timeMap, rate }) => {
+						resolve({ timeMap, rate });
+					},
+					error: (err) => {
+						this.toastrService.error(err?.message || 'An unknown error occurred');
+						reject(new Error(`Error: ${err?.message || 'An unknown error occurred'}`));
+					}
+				});
+		});
+	}
+
 	// Helper function to create invoice data objects
 	private createInvoiceData(selectedItem, price: number, quantity: number, currency?: string) {
 		return {
@@ -1098,7 +1177,6 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 			selectedItem: newData.selectedItem !== undefined ? newData.selectedItem : lastSourceData.selectedItem
 		};
 		const quantityIsValid = /^\d*\.?\d+$/.test(newData.quantity) && !/^0\d+/.test(newData.quantity);
-
 		if (
 			quantityIsValid &&
 			Number.isFinite(+newData.quantity) &&
@@ -1107,6 +1185,7 @@ export class InvoiceAddByRoleComponent extends PaginationFilterBaseComponent imp
 		) {
 			newData = { ...newData, price: extractNumber(newData.price) };
 			const itemTotal = +newData.quantity * +extractNumber(newData.price);
+			newData.totalValue = itemTotal;
 			this.subtotal += itemTotal;
 			await event.confirm.resolve(newData);
 			await this.calculateTotal();

apps/gauzy/src/app/pages/invoices/invoice-edit/by-role/invoice-edit-by-role.component.ts

@@ -36,6 +36,7 @@ import {
 	InvoiceApplyTaxDiscountComponent,
 	InvoiceExpensesSelectorComponent,
 	InvoiceProductsSelectorComponent,
+	InvoiceProjectFilterComponent,
 	InvoiceProjectsSelectorComponent,
 	InvoiceTasksSelectorComponent
 } from '../../table-components';
@@ -282,6 +283,16 @@ export class InvoiceEditByRoleComponent extends PaginationFilterBaseComponent im
 					},
 					valuePrepareFunction: (project: IOrganizationProject) => {
 						return project?.name || '';
+					},
+					filter: {
+						type: 'custom',
+						component: InvoiceProjectFilterComponent
+					},
+					filterFunction: (value, search) => {
+						if (!search || !value) {
+							return true;
+						}
+						return value.name.toLowerCase().includes(search.toLowerCase());
 					}
 				};
 				break;

apps/gauzy/src/app/pages/invoices/table-components/index.ts

@@ -5,3 +5,4 @@ export * from './invoice-paid.component';
 export * from './invoice-product-selector.component';
 export * from './invoice-project-selector.component';
 export * from './invoice-tasks-selector.component';
+export * from './invoice-project-filter.component';

apps/gauzy/src/app/pages/invoices/table-components/invoice-project-filter.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { DefaultFilter } from 'angular2-smart-table';
+
+@UntilDestroy({ checkProperties: true })
+@Component({
+	template: `
+		<input
+			nbInput
+			fullWidth
+			placeholder="{{ 'INVOICES_PAGE.INVOICE_ITEM.PROJECT' | translate }}"
+			[(ngModel)]="query"
+			(ngModelChange)="applyFilter($event)"
+		/>
+	`,
+	styles: [],
+	standalone: true,
+	imports: [FormsModule, TranslateModule]
+})
+export class InvoiceProjectFilterComponent extends DefaultFilter implements OnChanges {
+	@Input() query: string;
+
+	ngOnChanges() {
+		// smart table require OnChanges
+	}
+	applyFilter(value: string) {
+		this.query = value;
+		this.setFilter();
+	}
+}