feat: display weekly limit and remaining time in timer (#132)

Author: YanaYestr

packages/ui-core/core/src/lib/services/time-tracker/time-tracker.service.ts

@@ -230,6 +230,15 @@ export class TimeTrackerService implements OnDestroy {
 				} else if (error.status == 403 && error.error?.message === TimeErrorsEnum.INVALID_PROJECT_PERMISSIONS) {
 					this.turnOffTimer();
 					this.toastrService.danger('TIMER_TRACKER.PROJECT_PROJECT_PERMISSION_ERROR');
+				} else if (error.status === 409 && error.error?.message === TimeErrorsEnum.WEEKLY_LIMIT_REACHED) {
+					this.turnOffTimer();
+					this.updateTimerStore({
+						workedThisWeek: 0,
+						reWeeklyLimit: 0
+					});
+					this.toastrService.danger('TIMER_TRACKER.WEEKLY_LIMIT_EXCEEDED');
+
+					return Promise.reject(error);
 				} else {
 					console.error(error);
 				}

packages/ui-core/shared/src/lib/pipes/human-duration.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+import 'moment-duration-format';
+
+@Pipe({
+	name: 'humanDuration',
+	standalone: false
+})
+export class HumanDurationPipe implements PipeTransform {
+	transform(
+		value: number,
+		format?: string,
+		settings?: moment.DurationFormatSettings,
+		unitOfTime?: moment.unitOfTime.DurationConstructor
+	): string {
+		return moment.duration(value, unitOfTime || 'seconds').format(
+			format || 'HH:mm:ss',
+			settings || {
+				trim: false,
+				trunc: true
+			}
+		);
+	}
+}

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

@@ -13,6 +13,7 @@ import { UtcToLocalPipe } from './utc-to-local.pipe';
 import { HashNumberPipe } from './hash-number.pipe';
 import { UtcToTimezone } from './utc-to-timezone.pipe';
 import { HoursDurationFormatPipe } from './duration-to-hours-format.pipe';
+import { HumanDurationPipe } from './human-duration.pipe';
 
 export { CurrencyPositionPipe } from './currency-position.pipe';
 export { DateFormatPipe } from './date-format.pipe';
@@ -29,6 +30,7 @@ export { UtcToLocalPipe } from './utc-to-local.pipe';
 export { HashNumberPipe } from './hash-number.pipe';
 export { UtcToTimezone } from './utc-to-timezone.pipe';
 export { HoursDurationFormatPipe } from './duration-to-hours-format.pipe';
+export { HumanDurationPipe } from './human-duration.pipe';
 
 export const Pipes = [
 	CurrencyPositionPipe,
@@ -47,5 +49,6 @@ export const Pipes = [
 	UtcToLocalPipe,
 	UtcToTimezone,
 	HashNumberPipe,
-	HoursDurationFormatPipe
+	HoursDurationFormatPipe,
+	HumanDurationPipe
 ];

packages/ui-core/shared/src/lib/time-tracker/time-tracker/time-tracker.component.html

@@ -64,9 +64,16 @@ <h6 *ngIf="isExpanded">
 													{{ currentSessionTime }}
 												</span>
 												<span class="today-time mt-2">
-													{{ 'TIMER_TRACKER.TODAY' | translate }}
+													{{ 'TIMER_TRACKER.TODAY' | translate }}:
 													{{ todaySessionTime }}
 												</span>
+												<span class="today-time mt-2">
+													{{ 'TIMESHEET.WEEKLY' | translate }}:
+
+													{{ (workedThisWeek$ | async) || 0 | humanDuration : 'HH:mm' }}
+													/
+													{{ (reWeeklyLimit$ | async) * 3600 || 0 | humanDuration : 'HH:mm' }}
+												</span>
 											</div>
 											<span *ngIf="limitReached" class="today-time mt-2 invalid-feedback d-block">
 												{{ 'TOASTR.TITLE.MAX_LIMIT_REACHED' | translate }}