Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 copilot-swe-agent[bot]
|
80f7d7e3da |
No files matched your search
@@ -1,34 +0,0 @@
|
||||
version: 2
|
||||
updates:
|
||||
# Enable version updates for npm
|
||||
- package-ecosystem: 'npm'
|
||||
directory: '/'
|
||||
schedule:
|
||||
interval: 'weekly'
|
||||
day: 'monday'
|
||||
open-pull-requests-limit: 10
|
||||
groups:
|
||||
angular:
|
||||
patterns:
|
||||
- '@angular/*'
|
||||
development-dependencies:
|
||||
dependency-type: 'development'
|
||||
update-types:
|
||||
- 'minor'
|
||||
- 'patch'
|
||||
|
||||
# Enable version updates for GitHub Actions
|
||||
- package-ecosystem: 'github-actions'
|
||||
directory: '/'
|
||||
schedule:
|
||||
interval: 'weekly'
|
||||
day: 'monday'
|
||||
open-pull-requests-limit: 5
|
||||
|
||||
# Enable version updates for Docker
|
||||
- package-ecosystem: 'docker'
|
||||
directory: '/'
|
||||
schedule:
|
||||
interval: 'weekly'
|
||||
day: 'monday'
|
||||
open-pull-requests-limit: 5
|
||||
@@ -1,41 +0,0 @@
|
||||
name: CodeQL Security Analysis
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
schedule:
|
||||
- cron: '0 0 * * 1' # Run every Monday at midnight UTC
|
||||
|
||||
jobs:
|
||||
analyze:
|
||||
name: Analyze Code
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
security-events: write
|
||||
actions: read
|
||||
contents: read
|
||||
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
language: ['javascript-typescript']
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v6
|
||||
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@v4
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
queries: security-extended,security-and-quality
|
||||
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@v4
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@v4
|
||||
with:
|
||||
category: '/language:${{matrix.language}}'
|
||||
@@ -1,28 +0,0 @@
|
||||
name: Dependabot Auto-merge
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
auto-merge:
|
||||
name: Auto-merge Dependabot minor and patch updates
|
||||
runs-on: ubuntu-latest
|
||||
if: github.actor == 'dependabot[bot]'
|
||||
steps:
|
||||
- name: Fetch Dependabot metadata
|
||||
id: metadata
|
||||
uses: dependabot/fetch-metadata@v2.5.0
|
||||
|
||||
- name: Auto-merge minor and patch updates
|
||||
if: |
|
||||
steps.metadata.outputs.update-type == 'version-update:semver-minor' ||
|
||||
steps.metadata.outputs.update-type == 'version-update:semver-patch'
|
||||
run: gh pr merge --auto --squash "$PR_URL"
|
||||
env:
|
||||
PR_URL: ${{ github.event.pull_request.html_url }}
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
@@ -5,7 +5,6 @@ on:
|
||||
branches: [main]
|
||||
release:
|
||||
types: [published]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
@@ -13,13 +12,9 @@ jobs:
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
security-events: write
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Log in to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
@@ -38,28 +33,11 @@ jobs:
|
||||
type=semver,pattern={{version}}
|
||||
type=semver,pattern={{major}}.{{minor}}
|
||||
type=sha
|
||||
type=raw,value=latest,enable={{is_default_branch}}
|
||||
|
||||
- name: Build and push
|
||||
id: build
|
||||
uses: docker/build-push-action@v7
|
||||
uses: docker/build-push-action@v5
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
- name: Run Trivy vulnerability scanner
|
||||
uses: aquasecurity/trivy-action@0.35.0
|
||||
with:
|
||||
image-ref: ghcr.io/thoguet/vac-optimizer@${{ steps.build.outputs.digest }}
|
||||
format: 'sarif'
|
||||
output: 'trivy-results.sarif'
|
||||
|
||||
- name: Upload Trivy results to GitHub Security tab
|
||||
uses: github/codeql-action/upload-sarif@v4
|
||||
if: always()
|
||||
with:
|
||||
sarif_file: 'trivy-results.sarif'
|
||||
@@ -1,105 +0,0 @@
|
||||
name: PR Validation
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [main]
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
lint:
|
||||
name: Lint Check
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --legacy-peer-deps
|
||||
|
||||
- name: Check code formatting with Prettier
|
||||
run: npx prettier --check "src/**/*.{ts,html,scss,css,json}"
|
||||
|
||||
- name: Run ESLint
|
||||
run: npx eslint "src/**/*.ts"
|
||||
|
||||
type-check:
|
||||
name: TypeScript Type Check
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --legacy-peer-deps
|
||||
|
||||
- name: Run TypeScript compiler
|
||||
run: npx tsc --noEmit
|
||||
|
||||
test:
|
||||
name: Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --legacy-peer-deps
|
||||
|
||||
- name: Run unit tests
|
||||
run: npm test -- --watch=false --browsers=ChromeHeadless --code-coverage
|
||||
|
||||
- name: Upload coverage reports
|
||||
uses: codecov/codecov-action@v5
|
||||
if: always()
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
files: ./coverage/vac-optimizer/lcov.info
|
||||
fail_ci_if_error: false
|
||||
|
||||
build:
|
||||
name: Build Application
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --legacy-peer-deps
|
||||
|
||||
- name: Build production bundle
|
||||
run: npm run build -- --configuration production
|
||||
env:
|
||||
NG_BUILD_CACHE: '.angular/cache'
|
||||
|
||||
- name: Check bundle size
|
||||
run: |
|
||||
du -sh dist/vac-optimizer/browser
|
||||
echo "Build completed successfully"
|
||||
|
||||
- name: Upload build artifacts
|
||||
uses: actions/upload-artifact@v6
|
||||
with:
|
||||
name: build-artifacts
|
||||
path: dist/
|
||||
retention-days: 7
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
# Stage 1: Build the Angular application
|
||||
FROM node:25-alpine AS builder
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
@@ -17,7 +17,7 @@ COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Production image
|
||||
FROM node:25-alpine AS production
|
||||
FROM node:20-alpine AS production
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
@@ -12,38 +12,6 @@ ng serve
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
|
||||
## Code Quality
|
||||
|
||||
This project uses ESLint and Prettier to maintain code quality and consistency.
|
||||
|
||||
### Linting
|
||||
|
||||
Check for linting errors:
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
Auto-fix linting issues:
|
||||
|
||||
```bash
|
||||
npm run lint:fix
|
||||
```
|
||||
|
||||
### Formatting
|
||||
|
||||
Check code formatting:
|
||||
|
||||
```bash
|
||||
npm run format:check
|
||||
```
|
||||
|
||||
Format code:
|
||||
|
||||
```bash
|
||||
npm run format
|
||||
```
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
@@ -86,15 +54,6 @@ ng e2e
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## CI/CD
|
||||
|
||||
This project uses GitHub Actions for continuous integration and deployment:
|
||||
|
||||
- **PR Validation**: Automatically runs on pull requests to validate code quality, run tests, and build the application
|
||||
- **Docker Build & Push**: Builds and publishes Docker images to GitHub Container Registry on main branch pushes and releases
|
||||
- **CodeQL Analysis**: Runs security analysis weekly and on pull requests
|
||||
- **Dependabot**: Automatically updates dependencies weekly
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
+1
-4
@@ -52,10 +52,7 @@
|
||||
"maximumError": "16kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all",
|
||||
"optimization": {
|
||||
"fonts": false
|
||||
}
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
import eslintJs from '@eslint/js';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import prettier from 'eslint-config-prettier';
|
||||
import prettierPlugin from 'eslint-plugin-prettier';
|
||||
|
||||
export default [
|
||||
eslintJs.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
prettier,
|
||||
{
|
||||
files: ['**/*.ts'],
|
||||
plugins: {
|
||||
prettier: prettierPlugin,
|
||||
},
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'prettier/prettier': 'error',
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'error',
|
||||
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
ignores: ['dist/**', 'node_modules/**', '.angular/**', 'coverage/**'],
|
||||
},
|
||||
];
|
||||
Generated
+2597
-2762
File diff suppressed because it is too large.
Load diff
+30
-37
@@ -7,11 +7,7 @@
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test",
|
||||
"serve:ssr:vac-optimizer": "node dist/vac-optimizer/server/server.mjs",
|
||||
"lint": "eslint \"src/**/*.ts\"",
|
||||
"lint:fix": "eslint \"src/**/*.ts\" --fix",
|
||||
"format": "prettier --write \"src/**/*.{ts,html,scss,css,json}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{ts,html,scss,css,json}\""
|
||||
"serve:ssr:vac-optimizer": "node dist/vac-optimizer/server/server.mjs"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 100,
|
||||
@@ -27,45 +23,42 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "21.2.2",
|
||||
"@angular/cdk": "^21.2.1",
|
||||
"@angular/common": "21.2.2",
|
||||
"@angular/compiler": "21.2.4",
|
||||
"@angular/core": "21.2.2",
|
||||
"@angular/forms": "21.2.2",
|
||||
"@angular/material": "^21.2.1",
|
||||
"@angular/platform-browser": "21.2.2",
|
||||
"@angular/platform-server": "21.2.2",
|
||||
"@angular/router": "21.2.2",
|
||||
"@angular/ssr": "21.2.1",
|
||||
"date-holidays": "^3.26.9",
|
||||
"@angular/cdk": "^20.2.10",
|
||||
"@angular/common": "^20.3.0",
|
||||
"@angular/compiler": "^20.3.0",
|
||||
"@angular/core": "^20.3.7",
|
||||
"@angular/forms": "^20.3.0",
|
||||
"@angular/material": "^20.2.10",
|
||||
"@angular/platform-browser": "^20.3.0",
|
||||
"@angular/platform-server": "^20.3.0",
|
||||
"@angular/router": "^20.3.0",
|
||||
"@angular/ssr": "^20.3.7",
|
||||
"date-holidays": "^3.26.2",
|
||||
"dayjs": "^1.11.19",
|
||||
"express": "^5.2.1",
|
||||
"rxjs": "~7.8.2",
|
||||
"tslib": "^2.8.1"
|
||||
"express": "^5.1.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "21.2.1",
|
||||
"@angular/cli": "21.2.1",
|
||||
"@angular/compiler-cli": "21.2.2",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/express": "^5.0.6",
|
||||
"@types/jasmine": "~6.0.0",
|
||||
"@angular/build": "^20.3.7",
|
||||
"@angular/cli": "^20.3.7",
|
||||
"@angular/compiler-cli": "^20.3.0",
|
||||
"@types/express": "^5.0.1",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/node": "^25.4.0",
|
||||
"eslint": "^10.0.3",
|
||||
"@types/node": "^20.17.19",
|
||||
"eslint": "^9.38.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-prettier": "^5.5.5",
|
||||
"jasmine-core": "~6.1.0",
|
||||
"eslint-plugin-prettier": "^5.5.4",
|
||||
"jasmine-core": "~5.9.0",
|
||||
"jest": "^30.2.0",
|
||||
"jest-preset-angular": "^16.1.1",
|
||||
"karma": "~6.4.4",
|
||||
"jest-preset-angular": "^15.0.3",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.1",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.2.0",
|
||||
"prettier": "^3.8.1",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.57.0"
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"prettier": "^3.6.2",
|
||||
"typescript": "~5.9.2"
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,9 @@ import { appConfig } from './app.config';
|
||||
import { serverRoutes } from './app.routes.server';
|
||||
|
||||
const serverConfig: ApplicationConfig = {
|
||||
providers: [provideServerRendering(withRoutes(serverRoutes))],
|
||||
providers: [
|
||||
provideServerRendering(withRoutes(serverRoutes))
|
||||
]
|
||||
};
|
||||
|
||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
withEventReplay,
|
||||
withIncrementalHydration,
|
||||
} from '@angular/platform-browser';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
@@ -19,6 +18,5 @@ export const appConfig: ApplicationConfig = {
|
||||
provideZonelessChangeDetection(),
|
||||
provideRouter(routes),
|
||||
provideClientHydration(withEventReplay(), withIncrementalHydration()),
|
||||
provideAnimationsAsync(),
|
||||
],
|
||||
};
|
||||
@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
|
||||
export const serverRoutes: ServerRoute[] = [
|
||||
{
|
||||
path: '**',
|
||||
renderMode: RenderMode.Client,
|
||||
},
|
||||
renderMode: RenderMode.Client
|
||||
}
|
||||
];
|
||||
+2
-2
@@ -6,7 +6,7 @@ describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
providers: [provideZonelessChangeDetection()]
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
@@ -20,6 +20,6 @@ describe('App', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('vac-optimizer');
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, vac-optimizer');
|
||||
});
|
||||
});
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, model, signal } from '@angular/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { provideNativeDateAdapter } from '@angular/material/core';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<h3>{{ getMonthName() }} {{ year }}</h3>
|
||||
<div>
|
||||
<div class="row header">
|
||||
@if (calendarSettingsService.get('showWeekNumbers')()) {
|
||||
@if (calendarSettingsService.showWeekNumbers()) {
|
||||
<p class="day empty week-number"></p>
|
||||
}
|
||||
<p class="day">L</p>
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="cols">
|
||||
@for (week of weeksInAMonth; track $index) {
|
||||
<div class="row week">
|
||||
@if (calendarSettingsService.get('showWeekNumbers')()) {
|
||||
@if (calendarSettingsService.showWeekNumbers()) {
|
||||
<p
|
||||
class="day week-number"
|
||||
[class.start]="$index === 0"
|
||||
@@ -38,6 +38,7 @@
|
||||
class="day number"
|
||||
[matTooltip]="selectedDates.getTooltip(day)"
|
||||
[matTooltipShowDelay]="500"
|
||||
[matTooltipTouchGestures]="'on'"
|
||||
>
|
||||
{{ day.getDate() }}
|
||||
</p>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { CalendarMonth } from './calendar-month';
|
||||
|
||||
describe('CalendarMonth', () => {
|
||||
let component: CalendarMonth;
|
||||
let fixture: ComponentFixture<CalendarMonth>;
|
||||
let component: CalendarMonth;
|
||||
let fixture: ComponentFixture<CalendarMonth>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarMonth],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarMonth]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CalendarMonth);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(CalendarMonth);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Component, Input, OnInit, inject } from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { CalendarService, Month, monthNames, SelectedDates } from '../../services/calendar-service';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { CalendarSettingsService } from '../../services/calendar-settings-service';
|
||||
import { DateCacheService } from '../../services/date-cache.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-calendar-month',
|
||||
@@ -11,8 +10,7 @@ import { DateCacheService } from '../../services/date-cache.service';
|
||||
styleUrl: './calendar-month.scss',
|
||||
})
|
||||
export class CalendarMonth implements OnInit {
|
||||
protected calendarSettingsService = inject(CalendarSettingsService);
|
||||
private dateCache = inject(DateCacheService);
|
||||
constructor(protected calendarSettingsService: CalendarSettingsService) {}
|
||||
|
||||
@Input({ required: true })
|
||||
monthIndex!: number;
|
||||
@@ -20,9 +18,10 @@ export class CalendarMonth implements OnInit {
|
||||
@Input({ required: true })
|
||||
year!: number;
|
||||
|
||||
// Use DateCacheService instead of creating Date objects
|
||||
getNow(): Date {
|
||||
return this.dateCache.getNow();
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
return now;
|
||||
}
|
||||
|
||||
currentMonth: Date = new Date();
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { CalendarSettings } from './calendar-settings';
|
||||
|
||||
describe('CalendarSettings', () => {
|
||||
let component: CalendarSettings;
|
||||
let fixture: ComponentFixture<CalendarSettings>;
|
||||
let component: CalendarSettings;
|
||||
let fixture: ComponentFixture<CalendarSettings>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarSettings],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarSettings]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CalendarSettings);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(CalendarSettings);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButton, MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
||||
import { CalendarSettingsDialog } from '../dialog/calendar-settings-dialog/calendar-settings-dialog';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
|
||||
|
||||
@@ -1,24 +1,17 @@
|
||||
<div class="calendar-year">
|
||||
@if (isLoading()) {
|
||||
<div class="loading-overlay">
|
||||
<div class="loading-spinner">
|
||||
<div class="spinner-container">
|
||||
<mat-spinner [mode]="'determinate'" [value]="loadingProgress()"></mat-spinner>
|
||||
<div class="spinner-text">{{ loadingProgress() }}%</div>
|
||||
</div>
|
||||
<p>Calcul en cours...</p>
|
||||
</div>
|
||||
<div class="loading-overlay">
|
||||
<div class="loading-spinner">
|
||||
<mat-spinner></mat-spinner>
|
||||
<p>Calcul en cours...</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@for (month of months; track $index) {
|
||||
<mat-card class="card">
|
||||
<mat-card-content>
|
||||
<app-calendar-month
|
||||
[monthIndex]="month"
|
||||
[year]="getYear(month)"
|
||||
[selectedDates]="selectedDates"
|
||||
></app-calendar-month>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="card">
|
||||
<mat-card-content>
|
||||
<app-calendar-month [monthIndex]="month" [year]="getYear(month)" [selectedDates]="selectedDates"></app-calendar-month>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
@@ -51,32 +51,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
::ng-deep .mat-mdc-progress-spinner {
|
||||
// Override Material spinner size
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.spinner-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
pointer-events: none;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
@include mat.progress-spinner-overrides((size: 0.5rem, active-indicator-width: 0.25rem));
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { CalendarYear } from './calendar-year';
|
||||
|
||||
describe('CalendarYear', () => {
|
||||
let component: CalendarYear;
|
||||
let fixture: ComponentFixture<CalendarYear>;
|
||||
let component: CalendarYear;
|
||||
let fixture: ComponentFixture<CalendarYear>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarYear],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarYear]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CalendarYear);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(CalendarYear);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,78 +1,57 @@
|
||||
import { Component, effect, signal, inject, untracked } from '@angular/core';
|
||||
import { Component, effect, signal } from '@angular/core';
|
||||
import { UserInputService } from '../../services/user-input-service';
|
||||
import { MatCard, MatCardContent } from '@angular/material/card';
|
||||
import { CalendarMonth } from '../calendar-month/calendar-month';
|
||||
import { CalendarService, SelectedDates } from '../../services/calendar-service';
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { CalendarSettingsService } from '../../services/calendar-settings-service';
|
||||
import { DateCacheService } from '../../services/date-cache.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-calendar-year',
|
||||
imports: [MatCard, CalendarMonth, MatCardContent, MatProgressSpinner],
|
||||
imports: [MatCard, CalendarMonth, MatCardContent, CommonModule, MatProgressSpinner],
|
||||
templateUrl: './calendar-year.html',
|
||||
styleUrl: './calendar-year.scss',
|
||||
})
|
||||
export class CalendarYear {
|
||||
private dateCache = inject(DateCacheService);
|
||||
private userInput = inject(UserInputService);
|
||||
private calendarService = inject(CalendarService);
|
||||
private calendarSettingsService = inject(CalendarSettingsService);
|
||||
|
||||
protected isLoading = signal(true);
|
||||
protected loadingProgress = signal(0);
|
||||
|
||||
// Use DateCacheService instead of creating Date objects
|
||||
private get currentMonth() {
|
||||
return this.dateCache.getCurrentMonth();
|
||||
}
|
||||
|
||||
private get currentYear() {
|
||||
return this.dateCache.getCurrentYear();
|
||||
}
|
||||
|
||||
constructor() {
|
||||
constructor(
|
||||
private userInput: UserInputService,
|
||||
private calendarService: CalendarService,
|
||||
private calendarSettingsService: CalendarSettingsService,
|
||||
) {
|
||||
effect(() => {
|
||||
this.userInput.computeTriggerSignal();
|
||||
|
||||
this.selectedDates = this.calendarService.getSelectedDatesForYear();
|
||||
const vacationData = untracked(() => this.userInput.vacationNumberSignal());
|
||||
const c = untracked(() => this.calendarSettingsService.get('samediMalin')());
|
||||
const vacationData = this.userInput.vacationNumberSignal();
|
||||
const c = this.calendarSettingsService.samediMalin();
|
||||
console.log('Samedi Malin setting:', c);
|
||||
console.log('Optimizing vacations with data:', vacationData);
|
||||
this.isLoading.set(true);
|
||||
this.loadingProgress.set(0);
|
||||
// Defer execution to allow UI to update
|
||||
queueMicrotask(() => {
|
||||
void (async () => {
|
||||
if (this.selectedDates) {
|
||||
// Create a deep copy to avoid mutating the original signal data
|
||||
const vacationDaysCopy = vacationData.map((vd) => ({ ...vd }));
|
||||
const remainingDays = await this.selectedDates.optimizeVacations(
|
||||
vacationDaysCopy,
|
||||
this.calendarSettingsService,
|
||||
this.calendarService,
|
||||
(progress: number) => {
|
||||
this.loadingProgress.set(progress);
|
||||
},
|
||||
);
|
||||
// Update the remaining vacation days signal
|
||||
this.userInput.remainingVacationDaysSignal.set(remainingDays);
|
||||
}
|
||||
this.isLoading.set(false);
|
||||
})();
|
||||
});
|
||||
// Simulate server-side calculation with a small delay
|
||||
setTimeout(() => {
|
||||
if (this.selectedDates) {
|
||||
// Create a copy to avoid mutating the original signal data
|
||||
this.selectedDates.optimizeVacations(
|
||||
{ ...vacationData },
|
||||
this.calendarSettingsService,
|
||||
);
|
||||
}
|
||||
this.isLoading.set(false);
|
||||
}, 1);
|
||||
});
|
||||
}
|
||||
|
||||
protected selectedDates: SelectedDates = new SelectedDates();
|
||||
|
||||
getYear(monthIndex: number): number {
|
||||
const offset = this.currentMonth <= monthIndex ? 0 : 1;
|
||||
return this.currentYear + offset;
|
||||
const offset = new Date().getMonth() <= monthIndex ? 0 : 1;
|
||||
return new Date().getFullYear() + offset;
|
||||
}
|
||||
|
||||
// months starting from actual date - cache this array
|
||||
protected months: number[] = Array.from({ length: 12 }, (_, i) => (this.currentMonth + i) % 12);
|
||||
// months starting from actual date
|
||||
protected months: number[] = Array.from(
|
||||
{ length: 12 },
|
||||
(_, i) => (new Date().getMonth() + i) % 12,
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { DarkLightModeButton } from './dark-light-mode-button';
|
||||
|
||||
describe('DarkLightModeButton', () => {
|
||||
@@ -9,7 +9,6 @@ describe('DarkLightModeButton', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DarkLightModeButton],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DarkLightModeButton);
|
||||
|
||||
@@ -4,18 +4,26 @@
|
||||
<p>Configure your calendar settings here.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem">
|
||||
@for (setting of calendarSettingsService.settingsArray; track setting.id) {
|
||||
<div style="align-self: flex-start">
|
||||
<mat-slide-toggle
|
||||
[id]="setting.id"
|
||||
[name]="setting.id"
|
||||
[checked]="setting.signal()"
|
||||
(change)="setting.signal.set($event.checked)"
|
||||
>
|
||||
{{ setting.description }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
}
|
||||
<div style="align-self: flex-start">
|
||||
<mat-slide-toggle
|
||||
id="showWeekNumbers"
|
||||
name="showWeekNumbers"
|
||||
[checked]="calendarSettingsService.showWeekNumbers()"
|
||||
(change)="calendarSettingsService.showWeekNumbers.set($event.checked)"
|
||||
>
|
||||
Afficher les numéros de semaine
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div style="align-self: flex-start">
|
||||
<mat-slide-toggle
|
||||
id="samediMalin"
|
||||
name="samediMalin"
|
||||
[checked]="calendarSettingsService.samediMalin()"
|
||||
(change)="calendarSettingsService.samediMalin.set($event.checked)"
|
||||
>
|
||||
Activer le Samedi Malin
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-button (click)="closeDialog()">Fermer</button>
|
||||
</div>
|
||||
+15
-33
@@ -1,41 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
import { CalendarSettingsDialog } from './calendar-settings-dialog';
|
||||
|
||||
describe('CalendarSettingsDialog', () => {
|
||||
let component: CalendarSettingsDialog;
|
||||
let fixture: ComponentFixture<CalendarSettingsDialog>;
|
||||
let component: CalendarSettingsDialog;
|
||||
let fixture: ComponentFixture<CalendarSettingsDialog>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarSettingsDialog],
|
||||
providers: [
|
||||
provideZonelessChangeDetection(),
|
||||
{
|
||||
provide: MatDialogRef,
|
||||
useValue: {
|
||||
close: jasmine.createSpy('close'),
|
||||
},
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalendarSettingsDialog]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CalendarSettingsDialog);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(CalendarSettingsDialog);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should have calendar settings service', () => {
|
||||
expect(component['calendarSettingsService']).toBeDefined();
|
||||
});
|
||||
|
||||
it('should close dialog when closeDialog is called', () => {
|
||||
component.closeDialog();
|
||||
expect(component.dialogRef.close).toHaveBeenCalled();
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { MatCheckbox } from '@angular/material/checkbox';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
import { CalendarSettingsService } from '../../../services/calendar-settings-service';
|
||||
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
||||
import { CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
||||
|
||||
@Component({
|
||||
selector: 'app-calendar-settings-dialog',
|
||||
@@ -11,8 +13,10 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
|
||||
styleUrl: './calendar-settings-dialog.scss',
|
||||
})
|
||||
export class CalendarSettingsDialog {
|
||||
public readonly dialogRef = inject<MatDialogRef<CalendarSettingsDialog>>(MatDialogRef);
|
||||
protected readonly calendarSettingsService = inject(CalendarSettingsService);
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<CalendarSettingsDialog>,
|
||||
protected calendarSettingsService: CalendarSettingsService,
|
||||
) {}
|
||||
|
||||
closeDialog() {
|
||||
this.dialogRef.close();
|
||||
|
||||
@@ -1,44 +1,18 @@
|
||||
<div class="user-input">
|
||||
<p>Optimisez vos jours de vacances en fonction des jours fériés et des week-ends !</p>
|
||||
<div class="listOfDays">
|
||||
@for (day of daysOff; track day.id) {
|
||||
<div class="day-input-wrapper" animate.enter="day-enter" animate.leave="day-leave">
|
||||
<app-day-input
|
||||
[day]="day"
|
||||
(dayChange)="updateDay($index, $event)"
|
||||
(deleteEntry)="removeFromList($index)"
|
||||
></app-day-input>
|
||||
</div>
|
||||
}
|
||||
<mat-card class="add-day-card mat-elevation-z2" (click)="addDay()">
|
||||
<button matFab aria-label="Add entry">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<h3>Ajouter un jour de vacances</h3>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button matFab extended (click)="triggerComputation()">
|
||||
<mat-icon>calculate</mat-icon>
|
||||
Calculer
|
||||
</button>
|
||||
<app-calendar-settings></app-calendar-settings>
|
||||
</div>
|
||||
@if (hasRemainingDays()) {
|
||||
<mat-card class="mat-elevation-z2 warning-card">
|
||||
<mat-card-content class="warning-content">
|
||||
<mat-icon color="warn">warning</mat-icon>
|
||||
<div class="warning">
|
||||
<span>
|
||||
{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances
|
||||
non placé{{ remainingDays() > 1 ? 's' : '' }}:
|
||||
</span>
|
||||
@for (day of remainingDaysDetails(); track $index) {
|
||||
<span class="remaining-day-detail">- {{ day }}</span>
|
||||
}
|
||||
<span> Veuillez les placer manuellement. </span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
<form [formGroup]="userInputForm">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Combien de CP par an ?</mat-label>
|
||||
<input matInput type="number" max="365" min="0" formControlName="CP" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Combien de jours de RTT par an ?</mat-label>
|
||||
<input matInput type="number" max="365" min="0" formControlName="RTT" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Autres jours</mat-label>
|
||||
<input matInput type="number" max="365" min="0" formControlName="Others" />
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<app-calendar-settings></app-calendar-settings>
|
||||
</div>
|
||||
@@ -13,91 +13,9 @@
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.listOfDays {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.day-input-wrapper {
|
||||
animation: slide-fade-in 200ms ease-out;
|
||||
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.day-enter {
|
||||
animation: slide-fade-in 200ms ease-out;
|
||||
}
|
||||
|
||||
.day-leave {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
transition:
|
||||
opacity 200ms ease-in,
|
||||
transform 200ms ease-in;
|
||||
}
|
||||
|
||||
@keyframes slide-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.add-day-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-day-card h3 {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1,46 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { UserInput } from './user-input';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { UserInputService } from '../../services/user-input-service';
|
||||
|
||||
describe('UserInput', () => {
|
||||
let component: UserInput;
|
||||
let fixture: ComponentFixture<UserInput>;
|
||||
let userInputService: UserInputService;
|
||||
let component: UserInput;
|
||||
let fixture: ComponentFixture<UserInput>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserInput],
|
||||
providers: [provideZonelessChangeDetection(), provideAnimationsAsync()],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserInput]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UserInput);
|
||||
component = fixture.componentInstance;
|
||||
userInputService = TestBed.inject(UserInputService);
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(UserInput);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should initialize with vacation days from service', () => {
|
||||
const vacationDays = userInputService.vacationNumberSignal();
|
||||
expect(vacationDays).toBeDefined();
|
||||
expect(Array.isArray(vacationDays)).toBe(true);
|
||||
expect(vacationDays.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should add a new vacation day', () => {
|
||||
const initialLength = userInputService.vacationNumberSignal().length;
|
||||
component.addDay();
|
||||
expect(userInputService.vacationNumberSignal().length).toBe(initialLength + 1);
|
||||
});
|
||||
|
||||
it('should remove a vacation day', () => {
|
||||
const initialLength = userInputService.vacationNumberSignal().length;
|
||||
component.removeFromList(0);
|
||||
expect(userInputService.vacationNumberSignal().length).toBe(initialLength - 1);
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,77 +1,68 @@
|
||||
import { Component, computed, inject, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, effect } from '@angular/core';
|
||||
import { MatFormField, MatLabel } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { UserInputService } from '../../services/user-input-service';
|
||||
import { VacationsNumber } from '../../services/calendar-service';
|
||||
import { debounceTime, takeUntil, Subject } from 'rxjs';
|
||||
import { CalendarSettings } from '../calendar-settings/calendar-settings';
|
||||
import { MatCard, MatCardContent } from '@angular/material/card';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { DayInput } from '../userInput/day-input/day-input';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { tooltipTypeMapping, DayType, VacDay } from '../../services/calendar-service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-input',
|
||||
imports: [
|
||||
MatFormField,
|
||||
MatLabel,
|
||||
MatInputModule,
|
||||
ReactiveFormsModule,
|
||||
CalendarSettings,
|
||||
CalendarSettings,
|
||||
MatCard,
|
||||
MatCardContent,
|
||||
MatIcon,
|
||||
MatButtonModule,
|
||||
DayInput,
|
||||
],
|
||||
templateUrl: './user-input.html',
|
||||
styleUrl: './user-input.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class UserInput {
|
||||
private userInputService: UserInputService = inject(UserInputService);
|
||||
export class UserInput implements OnInit, OnDestroy {
|
||||
constructor(private userInputService: UserInputService) {
|
||||
// Watch for signal changes and update form
|
||||
effect(() => {
|
||||
const vacationData = this.userInputService.vacationNumberSignal();
|
||||
this.userInputForm.patchValue(
|
||||
{
|
||||
CP: vacationData.cp,
|
||||
RTT: vacationData.rtt,
|
||||
Others: vacationData.other,
|
||||
},
|
||||
{ emitEvent: false },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
protected remainingDays = computed(() => {
|
||||
const remaining = this.userInputService.remainingVacationDaysSignal();
|
||||
return remaining.reduce((acc, day) => acc + day.numberOfDays, 0);
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
userInputForm: FormGroup = new FormGroup({
|
||||
CP: new FormControl<number | null>(null),
|
||||
RTT: new FormControl<number | null>(null),
|
||||
Others: new FormControl<number | null>(null),
|
||||
});
|
||||
|
||||
protected remainingDaysDetails = computed(() => {
|
||||
const remaining = this.userInputService.remainingVacationDaysSignal();
|
||||
return remaining
|
||||
.filter((day) => day.numberOfDays > 0)
|
||||
.map((day) => {
|
||||
const typeName = tooltipTypeMapping[day.type as unknown as DayType];
|
||||
const expiryDate = day.expiryDate.toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
return `${day.numberOfDays} ${typeName} (exp. ${expiryDate})`;
|
||||
});
|
||||
});
|
||||
|
||||
protected hasRemainingDays = computed(() => this.remainingDays() > 0);
|
||||
|
||||
protected get daysOff() {
|
||||
return this.userInputService.vacationNumberSignal();
|
||||
ngOnInit() {
|
||||
this.userInputForm.valueChanges
|
||||
.pipe(debounceTime(1500), takeUntil(this.destroy$))
|
||||
.subscribe(() => this.submitForm());
|
||||
}
|
||||
|
||||
public addDay() {
|
||||
this.userInputService.vacationNumberSignal.update((days) => [
|
||||
...days,
|
||||
this.userInputService.createVacationDay(),
|
||||
]);
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
public removeFromList(index: number) {
|
||||
this.userInputService.vacationNumberSignal.update((days) =>
|
||||
days.filter((_, i) => i !== index),
|
||||
);
|
||||
}
|
||||
|
||||
public updateDay(index: number, updatedDay: VacDay) {
|
||||
this.userInputService.vacationNumberSignal.update((days) =>
|
||||
days.map((day, i) => (i === index ? updatedDay : day)),
|
||||
);
|
||||
}
|
||||
|
||||
public triggerComputation() {
|
||||
this.userInputService.requestComputation();
|
||||
private submitForm() {
|
||||
if (this.userInputForm.valid) {
|
||||
const vacationData: VacationsNumber = {
|
||||
cp: this.userInputForm.get('CP')?.value || 0,
|
||||
rtt: this.userInputForm.get('RTT')?.value || 0,
|
||||
other: this.userInputForm.get('Others')?.value || 0,
|
||||
};
|
||||
this.userInputService.vacationNumberSignal.set(vacationData);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { UserSettings } from './user-settings';
|
||||
|
||||
describe('UserSettings', () => {
|
||||
let component: UserSettings;
|
||||
let fixture: ComponentFixture<UserSettings>;
|
||||
let component: UserSettings;
|
||||
let fixture: ComponentFixture<UserSettings>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserSettings],
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
}).compileComponents();
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserSettings]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UserSettings);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
fixture = TestBed.createComponent(UserSettings);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
<!-- <mat-list-item role="listitem"> -->
|
||||
<mat-card class="card">
|
||||
<mat-form-field class="numberInput">
|
||||
<input
|
||||
matInput
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="day().numberOfDays"
|
||||
(input)="onInput($event)"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="dayTypeInput">
|
||||
<mat-select (valueChange)="onTypeChange($event)" [value]="day().type">
|
||||
<mat-option></mat-option>
|
||||
@for (dayType of selectableDayTypes; track $index) {
|
||||
<mat-option [value]="dayType">{{ tooltipTypeMapping[dayType] }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="dateInput">
|
||||
<mat-label>Choose a date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="datetime"
|
||||
[matDatepicker]="picker"
|
||||
[value]="day().expiryDate"
|
||||
(dateChange)="addEvent($event)"
|
||||
/>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button matFab aria-label="Delete entry" (click)="deleteEntry.emit()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-card>
|
||||
<!-- </mat-list-item> -->
|
||||
@@ -1,20 +0,0 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dateInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.numberInput {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
|
||||
import { DayInput } from './day-input';
|
||||
import { SelectableDayType, VacDay } from '../../../services/calendar-service';
|
||||
|
||||
describe('DayInput', () => {
|
||||
let component: DayInput;
|
||||
let fixture: ComponentFixture<DayInput>;
|
||||
|
||||
const mockVacDay: VacDay = {
|
||||
id: 'test-id',
|
||||
type: SelectableDayType.CP,
|
||||
numberOfDays: 5,
|
||||
expiryDate: new Date('2025-12-31'),
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DayInput],
|
||||
providers: [provideAnimationsAsync()],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DayInput);
|
||||
component = fixture.componentInstance;
|
||||
fixture.componentRef.setInput('day', mockVacDay);
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,103 +0,0 @@
|
||||
import { Component, input, output, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { SelectableDayType, tooltipTypeMapping, VacDay } from '../../../services/calendar-service';
|
||||
import { MatCard } from '@angular/material/card';
|
||||
import { MatOption, MatSelect } from '@angular/material/select';
|
||||
import { MatInput, MatInputModule, MatLabel } from '@angular/material/input';
|
||||
import {
|
||||
MatDatepicker,
|
||||
MatDatepickerInput,
|
||||
MatDatepickerInputEvent,
|
||||
MatDatepickerToggle,
|
||||
} from '@angular/material/datepicker';
|
||||
import {
|
||||
DateAdapter,
|
||||
MAT_DATE_FORMATS,
|
||||
MAT_DATE_LOCALE,
|
||||
NativeDateAdapter,
|
||||
} from '@angular/material/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
class CustomDateAdapter extends NativeDateAdapter {
|
||||
override format(date: Date, displayFormat: unknown): string {
|
||||
if (displayFormat === 'input') {
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
return `${day}/${month}/${year}`;
|
||||
}
|
||||
return super.format(date, displayFormat as object);
|
||||
}
|
||||
|
||||
override parse(value: string): Date | null {
|
||||
if (!value) return null;
|
||||
const parts = value.split('/');
|
||||
if (parts.length === 3) {
|
||||
const day = parseInt(parts[0], 10);
|
||||
const month = parseInt(parts[1], 10) - 1;
|
||||
const year = parseInt(parts[2], 10);
|
||||
if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
|
||||
return new Date(year, month, day);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const MY_DATE_FORMATS = {
|
||||
parse: {
|
||||
dateInput: 'input',
|
||||
},
|
||||
display: {
|
||||
dateInput: 'input',
|
||||
monthYearLabel: { year: 'numeric', month: 'short' },
|
||||
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
|
||||
monthYearA11yLabel: { year: 'numeric', month: 'long' },
|
||||
},
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'app-day-input',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatCard,
|
||||
MatSelect,
|
||||
MatOption,
|
||||
MatInput,
|
||||
MatDatepicker,
|
||||
MatLabel,
|
||||
MatDatepickerToggle,
|
||||
MatDatepickerInput,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
templateUrl: './day-input.html',
|
||||
styleUrl: './day-input.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
||||
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
|
||||
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
|
||||
],
|
||||
})
|
||||
export class DayInput {
|
||||
public day = input.required<VacDay>();
|
||||
public dayChange = output<VacDay>();
|
||||
public deleteEntry = output<void>();
|
||||
|
||||
protected readonly selectableDayTypes = Object.values(SelectableDayType);
|
||||
protected readonly tooltipTypeMapping = tooltipTypeMapping;
|
||||
|
||||
onInput(event: Event) {
|
||||
const value = Number((event.target as HTMLInputElement).value);
|
||||
this.dayChange.emit({ ...this.day(), numberOfDays: value });
|
||||
}
|
||||
|
||||
onTypeChange(type: SelectableDayType) {
|
||||
this.dayChange.emit({ ...this.day(), type });
|
||||
}
|
||||
|
||||
addEvent(event: MatDatepickerInputEvent<Date>) {
|
||||
this.dayChange.emit({ ...this.day(), expiryDate: event.value! });
|
||||
}
|
||||
}
|
||||
@@ -1,205 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
import { CalendarService, DayType, SelectedDate, SelectedDates } from './calendar-service';
|
||||
import { DateRange } from '@angular/material/datepicker';
|
||||
|
||||
describe('CalendarService', () => {
|
||||
let service: CalendarService;
|
||||
import { Calendar } from './calendar';
|
||||
|
||||
describe('Calendar', () => {
|
||||
let service: Calendar;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
service = TestBed.inject(CalendarService);
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(Calendar);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('getHolidays', () => {
|
||||
it('should return an array of holidays', () => {
|
||||
const holidays = service.getHolidays();
|
||||
expect(Array.isArray(holidays)).toBe(true);
|
||||
expect(holidays.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should cache holidays for the same year', () => {
|
||||
const holidays1 = service.getHolidays();
|
||||
const holidays2 = service.getHolidays();
|
||||
expect(holidays1).toEqual(holidays2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('static date calculation methods', () => {
|
||||
it('should calculate days in a week', () => {
|
||||
const week = CalendarService.daysInWeek(0, 0, 2024);
|
||||
expect(week.length).toBe(7);
|
||||
});
|
||||
|
||||
it('should calculate weeks in a month', () => {
|
||||
const weeks = CalendarService.weeksInMonth(0, 2024);
|
||||
expect(weeks.length).toBeGreaterThan(0);
|
||||
expect(weeks.length).toBeLessThanOrEqual(6);
|
||||
});
|
||||
|
||||
it('should calculate months in a year', () => {
|
||||
const months = CalendarService.monthsInYear(2024);
|
||||
expect(months.length).toBe(12);
|
||||
});
|
||||
|
||||
it('should calculate months from now', () => {
|
||||
const months = service.monthsInAYearFromNow();
|
||||
expect(months.length).toBe(12);
|
||||
});
|
||||
|
||||
it('should return week number for a date', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const weekNumber = CalendarService.getWeekNumber(date);
|
||||
expect(weekNumber).toBeGreaterThan(0);
|
||||
expect(weekNumber).toBeLessThanOrEqual(53);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getSelectedDatesForYear', () => {
|
||||
it('should return selected dates for the year', () => {
|
||||
const selectedDates = service.getSelectedDatesForYear();
|
||||
expect(selectedDates).toBeDefined();
|
||||
expect(selectedDates._datesSelected.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should include weekends', () => {
|
||||
const selectedDates = service.getSelectedDatesForYear();
|
||||
const hasWeekend = selectedDates._datesSelected.some(
|
||||
(date) => date.type === DayType.WEEKEND,
|
||||
);
|
||||
expect(hasWeekend).toBe(true);
|
||||
});
|
||||
|
||||
it('should include holidays', () => {
|
||||
const selectedDates = service.getSelectedDatesForYear();
|
||||
const hasHoliday = selectedDates._datesSelected.some(
|
||||
(date) => date.type === DayType.CLOSED_DAY,
|
||||
);
|
||||
expect(hasHoliday).toBe(true);
|
||||
});
|
||||
|
||||
it('should include today', () => {
|
||||
const selectedDates = service.getSelectedDatesForYear();
|
||||
const hasToday = selectedDates._datesSelected.some(
|
||||
(date) => date.type === DayType.TODAY,
|
||||
);
|
||||
expect(hasToday).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setWeekendSelection', () => {
|
||||
it('should add weekend for Saturday', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const saturday = new Date(2024, 0, 6); // A Saturday
|
||||
service.setWeekendSelection(saturday, selectedDates);
|
||||
expect(selectedDates._datesSelected.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('SelectedDate', () => {
|
||||
it('should check if date is selected', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(date, date));
|
||||
expect(selectedDate.isSelected(date)).toBe(true);
|
||||
});
|
||||
|
||||
it('should check if date is start', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(date, date));
|
||||
expect(selectedDate.isStart(date)).toBe(true);
|
||||
});
|
||||
|
||||
it('should check if date is end', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(date, date));
|
||||
expect(selectedDate.isEnd(date)).toBe(true);
|
||||
});
|
||||
|
||||
it('should return correct classes for date', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(date, date));
|
||||
const classes = selectedDate.getClasses(date);
|
||||
expect(classes).toContain(DayType.CP);
|
||||
});
|
||||
|
||||
it('should return tooltip for selected date', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(date, date));
|
||||
const tooltip = selectedDate.getTooltip(date);
|
||||
expect(tooltip).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calculate length in days', () => {
|
||||
const startDate = new Date(2024, 0, 1);
|
||||
const endDate = new Date(2024, 0, 3);
|
||||
const selectedDate = new SelectedDate(DayType.CP, new DateRange<Date>(startDate, endDate));
|
||||
expect(selectedDate.getLengthInDays()).toBe(3);
|
||||
});
|
||||
|
||||
it('should not mark TODAY as selected', () => {
|
||||
const date = new Date(2024, 0, 1);
|
||||
const selectedDate = new SelectedDate(DayType.TODAY, new DateRange<Date>(date, date));
|
||||
expect(selectedDate.isSelected(date)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('SelectedDates', () => {
|
||||
it('should push selected dates', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date = new Date(2024, 0, 1);
|
||||
selectedDates.push(new SelectedDate(DayType.CP, new DateRange<Date>(date, date)));
|
||||
expect(selectedDates._datesSelected.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should check if date is selected', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date = new Date(2024, 0, 1);
|
||||
selectedDates.push(new SelectedDate(DayType.CP, new DateRange<Date>(date, date)));
|
||||
expect(selectedDates.isSelected(date)).toBe(true);
|
||||
});
|
||||
|
||||
it('should group adjacent dates', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date1 = new Date(2024, 0, 1);
|
||||
const date2 = new Date(2024, 0, 2);
|
||||
selectedDates._datesSelected.push(
|
||||
new SelectedDate(DayType.CP, new DateRange<Date>(date1, date1)),
|
||||
);
|
||||
selectedDates._datesSelected.push(
|
||||
new SelectedDate(DayType.RTT, new DateRange<Date>(date2, date2)),
|
||||
);
|
||||
selectedDates.update();
|
||||
expect(selectedDates.datesSelected.length).toBeGreaterThan(2);
|
||||
});
|
||||
|
||||
it('should compute heuristics', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date = new Date(2024, 0, 1);
|
||||
selectedDates.push(new SelectedDate(DayType.CP, new DateRange<Date>(date, date)));
|
||||
const heuristic = selectedDates.computeHeuristics();
|
||||
expect(typeof heuristic).toBe('number');
|
||||
});
|
||||
|
||||
it('should return correct classes', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date = new Date(2024, 0, 1);
|
||||
selectedDates.push(new SelectedDate(DayType.CP, new DateRange<Date>(date, date)));
|
||||
const classes = selectedDates.getClasses(date);
|
||||
expect(classes).toContain(DayType.CP);
|
||||
});
|
||||
|
||||
it('should return tooltip', () => {
|
||||
const selectedDates = new SelectedDates();
|
||||
const date = new Date(2024, 0, 1);
|
||||
selectedDates.push(new SelectedDate(DayType.CP, new DateRange<Date>(date, date)));
|
||||
const tooltip = selectedDates.getTooltip(date);
|
||||
expect(tooltip).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { DateRange } from '@angular/material/datepicker';
|
||||
import Holidays, { HolidaysTypes } from 'date-holidays';
|
||||
import dayjs from 'dayjs';
|
||||
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import { CalendarSettingsService } from './calendar-settings-service';
|
||||
import { DateCacheService } from './date-cache.service';
|
||||
|
||||
dayjs.extend(weekOfYear);
|
||||
dayjs.extend(isoWeek);
|
||||
@@ -20,49 +19,32 @@ const allTypesOptions: HolidaysTypes.Options = {
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class CalendarService {
|
||||
private dateCache = inject(DateCacheService);
|
||||
|
||||
// Cache for holiday timestamps
|
||||
private holidayTimestampsCache: Set<number> | null = null;
|
||||
private holidayCacheYear: number | null = null;
|
||||
|
||||
// Get selected dates from current date to the next year
|
||||
getSelectedDatesFromNow(): SelectedDates {
|
||||
const _holidays = this.getHolidays();
|
||||
const selectedDates: SelectedDates = new SelectedDates();
|
||||
const holidays = this.getHolidays();
|
||||
let selectedDates: SelectedDates = new SelectedDates();
|
||||
// Logic to populate selectedDates from now until the next year
|
||||
return selectedDates;
|
||||
}
|
||||
|
||||
getSelectedDatesForYear(): SelectedDates {
|
||||
const holidays = this.getHolidays();
|
||||
const monthInAYear = this.monthsInAYearFromNow();
|
||||
const selectedDates: SelectedDates = new SelectedDates();
|
||||
|
||||
// Use DateCacheService to get today's date components
|
||||
const {
|
||||
date: todayDate,
|
||||
month: todayMonth,
|
||||
year: todayYear,
|
||||
} = this.dateCache.getTodayComponents();
|
||||
|
||||
// Create a Set of holiday timestamps for O(1) lookup instead of O(n)
|
||||
const holidayTimestamps = new Set(holidays.map((h) => h.getTime()));
|
||||
|
||||
const monthInAYear = CalendarService.monthsInAYearFromNow();
|
||||
let selectedDates: SelectedDates = new SelectedDates();
|
||||
for (const weeksInAMonth of monthInAYear) {
|
||||
for (const daysInAWeek of weeksInAMonth) {
|
||||
for (const day of daysInAWeek) {
|
||||
if (day) {
|
||||
this.setWeekendSelection(day, selectedDates);
|
||||
if (holidayTimestamps.has(day.getTime())) {
|
||||
if (holidays.some((holiday) => holiday.getTime() === day.getTime())) {
|
||||
selectedDates._datesSelected.push(
|
||||
new SelectedDate(DayType.CLOSED_DAY, new DateRange<Date>(day, day)),
|
||||
);
|
||||
}
|
||||
if (
|
||||
day.getDate() === todayDate &&
|
||||
day.getMonth() === todayMonth &&
|
||||
day.getFullYear() === todayYear
|
||||
day.getDate() === new Date().getDate() &&
|
||||
day.getMonth() === new Date().getMonth() &&
|
||||
day.getFullYear() === new Date().getFullYear()
|
||||
) {
|
||||
selectedDates._datesSelected.push(
|
||||
new SelectedDate(DayType.TODAY, new DateRange<Date>(day, day)),
|
||||
@@ -102,24 +84,12 @@ export class CalendarService {
|
||||
}
|
||||
|
||||
getHolidays(): Date[] {
|
||||
// Cache holidays to avoid recalculation
|
||||
const currentYear = this.dateCache.getCurrentYear();
|
||||
if (this.holidayCacheYear === currentYear && this.holidayTimestampsCache) {
|
||||
// Return timestamps directly for efficient lookup
|
||||
return Array.from(this.holidayTimestampsCache).map((ts) => new Date(ts));
|
||||
}
|
||||
|
||||
// Logic to return holidays for the given year
|
||||
const hd = new Holidays('FR', allTypesOptions);
|
||||
const holidays = hd.getHolidays(currentYear, lang);
|
||||
const holidaysPlusOne = hd.getHolidays(currentYear + 1, lang);
|
||||
const holidays = hd.getHolidays(new Date().getFullYear(), lang);
|
||||
const holidaysPlusOne = hd.getHolidays(new Date().getFullYear() + 1, lang);
|
||||
holidays.push(...holidaysPlusOne);
|
||||
const holidaysDate: Date[] = holidays.map((holiday) => new Date(holiday.date));
|
||||
|
||||
// Update cache
|
||||
this.holidayTimestampsCache = new Set(holidaysDate.map((d) => d.getTime()));
|
||||
this.holidayCacheYear = currentYear;
|
||||
|
||||
let holidaysDate: Date[] = holidays.map((holiday) => new Date(holiday.date));
|
||||
return holidaysDate;
|
||||
}
|
||||
|
||||
@@ -167,14 +137,14 @@ export class CalendarService {
|
||||
return months;
|
||||
}
|
||||
|
||||
monthsInAYearFromNow(): Year {
|
||||
static monthsInAYearFromNow(): Year {
|
||||
const months: Year = [];
|
||||
const currentMonthIndex = this.dateCache.getCurrentMonth();
|
||||
const currentYear = this.dateCache.getCurrentYear();
|
||||
const currentMonthIndex = new Date().getMonth();
|
||||
const currentYear = new Date().getFullYear();
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const monthIndex = (currentMonthIndex + i) % 12;
|
||||
const year = currentYear + Math.floor((currentMonthIndex + i) / 12);
|
||||
months.push(CalendarService.weeksInMonth(monthIndex, year));
|
||||
months.push(this.weeksInMonth(monthIndex, year));
|
||||
}
|
||||
return months;
|
||||
}
|
||||
@@ -184,11 +154,10 @@ export class CalendarService {
|
||||
}
|
||||
}
|
||||
|
||||
export type VacDay = {
|
||||
id: string;
|
||||
type: SelectableDayType;
|
||||
numberOfDays: number;
|
||||
expiryDate: Date;
|
||||
export type VacationsNumber = {
|
||||
rtt: number;
|
||||
cp: number;
|
||||
other: number;
|
||||
};
|
||||
|
||||
export type Week = (Date | null)[];
|
||||
@@ -204,12 +173,6 @@ export enum DayType {
|
||||
TODAY = 'today',
|
||||
}
|
||||
|
||||
export enum SelectableDayType {
|
||||
CP = DayType.CP,
|
||||
RTT = DayType.RTT,
|
||||
OTHER = DayType.OTHER,
|
||||
}
|
||||
|
||||
export const tooltipTypeMapping: { [key in DayType]: string } = {
|
||||
[DayType.WEEKEND]: 'Weekend',
|
||||
[DayType.CLOSED_DAY]: 'Jour Férié',
|
||||
@@ -273,7 +236,7 @@ export class SelectedDate implements SelectedDateInterface {
|
||||
getClasses(date: Date): string {
|
||||
let returnType: DayType | string = '';
|
||||
if (this.type && date >= this.range.start! && date <= this.range.end!) {
|
||||
returnType += this.type + ' ';
|
||||
returnType = returnType += this.type + ' ';
|
||||
}
|
||||
return returnType;
|
||||
}
|
||||
@@ -303,10 +266,6 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
private minDate: Date | null = null;
|
||||
private maxDate: Date | null = null;
|
||||
|
||||
// Constant to indicate no valid strategy was found
|
||||
private static readonly NO_VALID_STRATEGY_HEURISTIC = -1;
|
||||
private static readonly MAX_DAYS_WITH_SAME_HEURISTIC = 9;
|
||||
|
||||
update(): void {
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
@@ -490,7 +449,7 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
const current = sorted[i];
|
||||
const next = sorted[i + 1];
|
||||
|
||||
// Get dates as UTC strings to remove timezone issues (handles DST properly)
|
||||
// Get dates as UTC strings to remove timezone issues
|
||||
const currentEndDate = new Date(current.range.end ?? new Date());
|
||||
const nextStartDate = new Date(next.range.start ?? new Date());
|
||||
|
||||
@@ -509,7 +468,7 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
|
||||
// Check if adjacent (next day) - this is the best case!
|
||||
if (nextStartTime - currentEndTime === oneDayInMs) {
|
||||
totalScore += 15; // 50% increased bonus for adjacency; adjacency is highly valued in the scoring system
|
||||
totalScore += 10; // Big bonus for adjacency
|
||||
} else if (nextStartTime > currentEndTime) {
|
||||
// Penalty based on days between the two dates
|
||||
const daysBetween = Math.floor((nextStartTime - currentEndTime) / oneDayInMs) - 1;
|
||||
@@ -527,7 +486,7 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
const daysInRange = selectedDate.getLengthInDays();
|
||||
|
||||
// For each day in the range, add it to the appropriate month
|
||||
const currentDate = new Date(selectedDate.range.start);
|
||||
let currentDate = new Date(selectedDate.range.start);
|
||||
for (let i = 0; i < daysInRange; i++) {
|
||||
const monthKey = currentDate.getFullYear() * 12 + currentDate.getMonth();
|
||||
monthCounts.set(monthKey, (monthCounts.get(monthKey) ?? 0) + 1);
|
||||
@@ -543,146 +502,50 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
return totalScore;
|
||||
}
|
||||
|
||||
async optimizeVacations(
|
||||
vacationDays: VacDay[],
|
||||
optimizeVacations(
|
||||
vacationsNumber: VacationsNumber,
|
||||
calendarSettingsService: CalendarSettingsService,
|
||||
calendarService: CalendarService,
|
||||
progressCallback?: (progress: number) => void,
|
||||
): Promise<VacDay[]> {
|
||||
if (calendarSettingsService.get('samediMalin')()) this.samediMalin(vacationDays);
|
||||
|
||||
// Calculate total days to process
|
||||
const totalDays = vacationDays.reduce((sum, vd) => sum + vd.numberOfDays, 0);
|
||||
let processedDays = 0;
|
||||
|
||||
// Helper function to update progress, throttled to every 5%
|
||||
let lastReportedProgress = 0;
|
||||
const PROGRESS_STEP = 5; // percent
|
||||
const updateProgress = async () => {
|
||||
if (progressCallback && totalDays > 0) {
|
||||
const progress = Math.round((processedDays / totalDays) * 100);
|
||||
if (progress - lastReportedProgress >= PROGRESS_STEP || progress === 100) {
|
||||
progressCallback(progress);
|
||||
lastReportedProgress = progress;
|
||||
// Allow UI to update with a microtask
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await updateProgress();
|
||||
|
||||
// Track VacDays that can't find valid placements
|
||||
const exhaustedVacDayIds = new Set<string>();
|
||||
|
||||
// Process vacation days ordered by expiration date (earliest first)
|
||||
while (vacationDays.some((vd) => vd.numberOfDays > 0 && !exhaustedVacDayIds.has(vd.id))) {
|
||||
// Sort by expiration date to use days that expire first, excluding exhausted ones
|
||||
const sortedVacDays = [...vacationDays]
|
||||
.filter((vd) => vd.numberOfDays > 0 && !exhaustedVacDayIds.has(vd.id))
|
||||
.sort((a, b) => a.expiryDate.getTime() - b.expiryDate.getTime());
|
||||
|
||||
if (sortedVacDays.length === 0) {
|
||||
): void {
|
||||
if (calendarSettingsService.samediMalin()) this.samediMalin(vacationsNumber);
|
||||
while (vacationsNumber.cp > 0) {
|
||||
const result = this.lookForVacation(DayType.CP);
|
||||
if (result.heuristic === -1) {
|
||||
break;
|
||||
}
|
||||
|
||||
const vacDayToUse = sortedVacDays[0];
|
||||
const result = this.lookForVacation(vacDayToUse, calendarService);
|
||||
|
||||
if (result.heuristic === SelectedDates.NO_VALID_STRATEGY_HEURISTIC) {
|
||||
// Mark this VacDay as exhausted and try other vacation days
|
||||
exhaustedVacDayIds.add(vacDayToUse.id);
|
||||
continue;
|
||||
vacationsNumber.cp -= 1;
|
||||
}
|
||||
while (vacationsNumber.rtt > 0) {
|
||||
const result = this.lookForVacation(DayType.RTT);
|
||||
if (result.heuristic === -1) {
|
||||
break;
|
||||
}
|
||||
|
||||
vacDayToUse.numberOfDays -= 1;
|
||||
processedDays++;
|
||||
await updateProgress();
|
||||
vacationsNumber.rtt -= 1;
|
||||
}
|
||||
|
||||
// Final progress update (100%)
|
||||
if (progressCallback) {
|
||||
progressCallback(100);
|
||||
while (vacationsNumber.other > 0) {
|
||||
const result = this.lookForVacation(DayType.OTHER);
|
||||
if (result.heuristic === -1) {
|
||||
break;
|
||||
}
|
||||
vacationsNumber.other -= 1;
|
||||
}
|
||||
|
||||
// Inform user if not all days were placed
|
||||
const remainingDays = vacationDays.reduce((sum, vd) => sum + vd.numberOfDays, 0);
|
||||
if (remainingDays > 0) {
|
||||
console.warn(
|
||||
`Optimization stopped: ${remainingDays} of ${totalDays} vacation days remain unplaced. ` +
|
||||
`Too many days have equivalent placement quality - please place remaining days manually.`,
|
||||
);
|
||||
}
|
||||
|
||||
return vacationDays;
|
||||
}
|
||||
|
||||
samediMalin(vacationDays: VacDay[]): void {
|
||||
samediMalin(vacationsNumber: VacationsNumber): void {
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
const nowTime = now.getTime();
|
||||
|
||||
const samedi_ferie = this._datesSelected.filter(
|
||||
const samedi_ferie = this.datesSelected.filter(
|
||||
(date) => date.type === DayType.CLOSED_DAY && date.range.start?.getDay() === 6,
|
||||
);
|
||||
|
||||
// Helper function to get available CP days that don't expire before a given date (ordered by expiry date)
|
||||
const getAvailableCpDaysForDate = (useByDate: Date): VacDay[] => {
|
||||
const useByTime = useByDate.getTime();
|
||||
return vacationDays
|
||||
.filter(
|
||||
(vd) =>
|
||||
vd.type === SelectableDayType.CP &&
|
||||
vd.numberOfDays > 0 &&
|
||||
vd.expiryDate.getTime() >= useByTime,
|
||||
)
|
||||
.sort((a, b) => a.expiryDate.getTime() - b.expiryDate.getTime());
|
||||
};
|
||||
|
||||
// Helper function to get total available CP days that don't expire before a given date
|
||||
const getTotalCpDaysForDate = (useByDate: Date): number => {
|
||||
const useByTime = useByDate.getTime();
|
||||
return vacationDays
|
||||
.filter(
|
||||
(vd) =>
|
||||
vd.type === SelectableDayType.CP && vd.expiryDate.getTime() >= useByTime,
|
||||
)
|
||||
.reduce((sum, vd) => sum + vd.numberOfDays, 0);
|
||||
};
|
||||
|
||||
// Helper function to consume 2 CP days from the available pool for a specific date
|
||||
const consume2CpDaysForDate = (useByDate: Date): boolean => {
|
||||
let daysToConsume = 2;
|
||||
const cpDays = getAvailableCpDaysForDate(useByDate);
|
||||
for (const cpDay of cpDays) {
|
||||
if (daysToConsume === 0) break;
|
||||
const toConsume = Math.min(cpDay.numberOfDays, daysToConsume);
|
||||
cpDay.numberOfDays -= toConsume;
|
||||
daysToConsume -= toConsume;
|
||||
}
|
||||
return daysToConsume === 0;
|
||||
};
|
||||
|
||||
// Helper function to add 1 OTHER day as reward
|
||||
const addOtherDayReward = (): void => {
|
||||
// Find an existing OTHER VacDay or create a new one
|
||||
const otherDay = vacationDays.find((vd) => vd.type === SelectableDayType.OTHER);
|
||||
if (otherDay) {
|
||||
otherDay.numberOfDays += 1;
|
||||
} else {
|
||||
// Create a new OTHER VacDay with a far future expiry date
|
||||
vacationDays.push({
|
||||
id: crypto.randomUUID(),
|
||||
type: SelectableDayType.OTHER,
|
||||
numberOfDays: 1,
|
||||
expiryDate: new Date(now.getFullYear() + 10, 11, 31),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (const holiday of samedi_ferie) {
|
||||
if (!holiday.range.start) continue;
|
||||
|
||||
// Skip if no CP days available
|
||||
if (vacationsNumber.cp < 2) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Get the Saturday date (holiday) and the following Sunday
|
||||
const saturdayDate = new Date(holiday.range.start);
|
||||
const sundayDate = new Date(saturdayDate);
|
||||
@@ -707,24 +570,21 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
const oneDayAfter = new Date(sundayDate);
|
||||
oneDayAfter.setDate(sundayDate.getDate() + 1);
|
||||
|
||||
// Check if we can apply each strategy (not in the past, not already selected, and have non-expired CP days)
|
||||
// Check if we can apply each strategy (and not in the past)
|
||||
const canApplyTwoBeforeStrategy =
|
||||
twoDaysBefore1.getTime() >= nowTime &&
|
||||
twoDaysBefore1 >= now &&
|
||||
!this.isSelected(twoDaysBefore1) &&
|
||||
!this.isSelected(twoDaysBefore2) &&
|
||||
getTotalCpDaysForDate(twoDaysBefore2) >= 2; // Check expiry against the latest date used
|
||||
!this.isSelected(twoDaysBefore2);
|
||||
|
||||
const canApplyTwoAfterStrategy =
|
||||
twoDaysAfter1.getTime() >= nowTime &&
|
||||
twoDaysAfter1 >= now &&
|
||||
!this.isSelected(twoDaysAfter1) &&
|
||||
!this.isSelected(twoDaysAfter2) &&
|
||||
getTotalCpDaysForDate(twoDaysAfter2) >= 2; // Check expiry against the latest date used
|
||||
!this.isSelected(twoDaysAfter2);
|
||||
|
||||
const canApplyMixedStrategy =
|
||||
oneDayBefore.getTime() >= nowTime &&
|
||||
oneDayBefore >= now &&
|
||||
!this.isSelected(oneDayBefore) &&
|
||||
!this.isSelected(oneDayAfter) &&
|
||||
getTotalCpDaysForDate(oneDayAfter) >= 2; // Check expiry against the latest date used
|
||||
!this.isSelected(oneDayAfter);
|
||||
|
||||
// Test all applicable strategies and choose the one with the best heuristic score
|
||||
const strategies: { apply: () => void; heuristic: number }[] = [];
|
||||
@@ -737,7 +597,6 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
new DateRange<Date>(twoDaysBefore1, twoDaysBefore2),
|
||||
),
|
||||
);
|
||||
const heuristic = this.computeHeuristics();
|
||||
strategies.push({
|
||||
apply: () => {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
@@ -747,10 +606,10 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
new DateRange<Date>(twoDaysBefore1, twoDaysBefore2),
|
||||
),
|
||||
);
|
||||
consume2CpDaysForDate(twoDaysBefore2);
|
||||
addOtherDayReward();
|
||||
vacationsNumber.cp -= 2;
|
||||
vacationsNumber.other += 1; // Reward: gain 1 other day
|
||||
},
|
||||
heuristic: heuristic,
|
||||
heuristic: this.computeHeuristics(),
|
||||
});
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
@@ -761,7 +620,6 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
this.push(
|
||||
new SelectedDate(DayType.CP, new DateRange<Date>(twoDaysAfter1, twoDaysAfter2)),
|
||||
);
|
||||
const heuristic = this.computeHeuristics();
|
||||
strategies.push({
|
||||
apply: () => {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
@@ -771,10 +629,10 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
new DateRange<Date>(twoDaysAfter1, twoDaysAfter2),
|
||||
),
|
||||
);
|
||||
consume2CpDaysForDate(twoDaysAfter2);
|
||||
addOtherDayReward();
|
||||
vacationsNumber.cp -= 2;
|
||||
vacationsNumber.other += 1; // Reward: gain 1 other day
|
||||
},
|
||||
heuristic: heuristic,
|
||||
heuristic: this.computeHeuristics(),
|
||||
});
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
@@ -788,7 +646,6 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
this.push(
|
||||
new SelectedDate(DayType.CP, new DateRange<Date>(oneDayAfter, oneDayAfter)),
|
||||
);
|
||||
const heuristic = this.computeHeuristics();
|
||||
strategies.push({
|
||||
apply: () => {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
@@ -804,10 +661,10 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
new DateRange<Date>(oneDayAfter, oneDayAfter),
|
||||
),
|
||||
);
|
||||
consume2CpDaysForDate(oneDayAfter);
|
||||
addOtherDayReward();
|
||||
vacationsNumber.cp -= 2;
|
||||
vacationsNumber.other += 1; // Reward: gain 1 other day
|
||||
},
|
||||
heuristic: heuristic,
|
||||
heuristic: this.computeHeuristics(),
|
||||
});
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
@@ -824,103 +681,65 @@ export class SelectedDates implements SelectedDateInterface {
|
||||
}
|
||||
}
|
||||
|
||||
lookForVacation(
|
||||
vacDay: VacDay,
|
||||
calendarService: CalendarService,
|
||||
): { apply: () => void; heuristic: number } {
|
||||
const daysOfYear = calendarService.monthsInAYearFromNow();
|
||||
lookForVacation(vacType: DayType): { apply: () => void; heuristic: number } {
|
||||
const daysOfYear = CalendarService.monthsInAYearFromNow();
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
const nowTime = now.getTime();
|
||||
const expiryTime = vacDay.expiryDate.getTime();
|
||||
|
||||
// Preprocess: filter out past days, already selected days, and days after expiry date
|
||||
const candidateDays: Date[] = [];
|
||||
daysOfYear.forEach((month) => {
|
||||
month.forEach((week) => {
|
||||
week.forEach((day) => {
|
||||
if (day) {
|
||||
if (day) day.setHours(0, 0, 0, 0);
|
||||
if (day && day < now) {
|
||||
week[week.indexOf(day)] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const tempDatesBackup = [...this._datesSelected];
|
||||
let strategies: { apply: () => void; heuristic: number; value: Date }[] = [];
|
||||
for (const month of daysOfYear) {
|
||||
for (const week of month) {
|
||||
for (const day of week) {
|
||||
if (day) {
|
||||
day.setHours(0, 0, 0, 0);
|
||||
const dayTime = day.getTime();
|
||||
if (dayTime >= nowTime && dayTime <= expiryTime && !this.isSelected(day)) {
|
||||
candidateDays.push(day);
|
||||
}
|
||||
if (day && !this.isSelected(day)) {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
// mark these days as vacation
|
||||
const startDay = new Date(day);
|
||||
const endDay = new Date(day);
|
||||
this.datesSelected.push(
|
||||
new SelectedDate(vacType, new DateRange<Date>(startDay, endDay)),
|
||||
);
|
||||
strategies.push({
|
||||
apply: () => {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.push(
|
||||
new SelectedDate(
|
||||
vacType,
|
||||
new DateRange<Date>(startDay, endDay),
|
||||
),
|
||||
);
|
||||
},
|
||||
heuristic: this.computeHeuristics(),
|
||||
value: startDay,
|
||||
});
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Early exit if no candidates
|
||||
if (candidateDays.length === 0) {
|
||||
return { apply: () => {}, heuristic: SelectedDates.NO_VALID_STRATEGY_HEURISTIC };
|
||||
}
|
||||
|
||||
const vacType = vacDay.type as unknown as DayType;
|
||||
const tempDatesBackup = [...this._datesSelected];
|
||||
let bestStrategy: { apply: () => void; heuristic: number; value: Date } | null = null;
|
||||
let bestHeuristic = -Infinity;
|
||||
let daysWithBestHeuristic = 0;
|
||||
|
||||
// Evaluate each candidate day
|
||||
for (const day of candidateDays) {
|
||||
// Reset to backup state
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
|
||||
// Mark this day as vacation (reuse the day object since it's already normalized)
|
||||
this.datesSelected.push(new SelectedDate(vacType, new DateRange<Date>(day, day)));
|
||||
|
||||
const heuristic = this.computeHeuristics();
|
||||
|
||||
// Track only if better than current best
|
||||
if (heuristic > bestHeuristic) {
|
||||
bestHeuristic = heuristic;
|
||||
daysWithBestHeuristic = 1;
|
||||
const capturedDay = day;
|
||||
bestStrategy = {
|
||||
apply: () => {
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.push(
|
||||
new SelectedDate(
|
||||
vacType,
|
||||
new DateRange<Date>(capturedDay, capturedDay),
|
||||
),
|
||||
);
|
||||
},
|
||||
heuristic: heuristic,
|
||||
value: capturedDay,
|
||||
};
|
||||
} else if (heuristic === bestHeuristic) {
|
||||
daysWithBestHeuristic++;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if too many days have the same best heuristic after evaluating all days
|
||||
if (daysWithBestHeuristic > SelectedDates.MAX_DAYS_WITH_SAME_HEURISTIC) {
|
||||
// Restore backup before stopping
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
|
||||
// Stop optimization - let user decide manually
|
||||
return {
|
||||
apply: () => {},
|
||||
heuristic: SelectedDates.NO_VALID_STRATEGY_HEURISTIC,
|
||||
};
|
||||
}
|
||||
|
||||
// Restore backup before returning
|
||||
this._datesSelected = [...tempDatesBackup];
|
||||
this.datesSelected = this._datesSelected.slice();
|
||||
this.grouping();
|
||||
|
||||
// Apply best strategy if found
|
||||
if (bestStrategy) {
|
||||
// Apply the strategy with the best heuristic score
|
||||
if (strategies.length > 0) {
|
||||
const bestStrategy = strategies.reduce((best, current) =>
|
||||
current.heuristic > best.heuristic ? current : best,
|
||||
);
|
||||
bestStrategy.apply();
|
||||
return bestStrategy;
|
||||
}
|
||||
|
||||
return { apply: () => {}, heuristic: SelectedDates.NO_VALID_STRATEGY_HEURISTIC };
|
||||
return { apply: () => {}, heuristic: -1 };
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { CalendarSettingsService } from './calendar-settings-service';
|
||||
|
||||
describe('CalendarSettingsService', () => {
|
||||
let service: CalendarSettingsService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(CalendarSettingsService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should initialize with default values', () => {
|
||||
expect(service.get('showWeekNumbers')()).toBe(false);
|
||||
expect(service.get('samediMalin')()).toBe(true);
|
||||
});
|
||||
|
||||
it('should allow updating showWeekNumbers', () => {
|
||||
service.get('showWeekNumbers').set(true);
|
||||
expect(service.get('showWeekNumbers')()).toBe(true);
|
||||
});
|
||||
|
||||
it('should allow updating samediMalin', () => {
|
||||
service.get('samediMalin').set(false);
|
||||
expect(service.get('samediMalin')()).toBe(false);
|
||||
});
|
||||
|
||||
it('should provide settings array for UI iteration', () => {
|
||||
const settingsArray = service.settingsArray;
|
||||
expect(settingsArray.length).toBe(2);
|
||||
expect(settingsArray[0].id).toBe('showWeekNumbers');
|
||||
expect(settingsArray[1].id).toBe('samediMalin');
|
||||
});
|
||||
|
||||
it('should return correct descriptions', () => {
|
||||
expect(service.getDescription('showWeekNumbers')).toBe('Afficher les numéros de semaine');
|
||||
expect(service.getDescription('samediMalin')).toBe('Activer le Samedi Malin');
|
||||
});
|
||||
});
|
||||
@@ -1,68 +1,9 @@
|
||||
import { Injectable, WritableSignal, inject, Injector } from '@angular/core';
|
||||
import { storedSignal } from '../shared/utils/stored-signal';
|
||||
|
||||
interface SettingDefinition {
|
||||
defaultValue: boolean;
|
||||
description: string;
|
||||
}
|
||||
import { Injectable, signal } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class CalendarSettingsService {
|
||||
private readonly injector = inject(Injector);
|
||||
|
||||
private readonly definitions = new Map<string, SettingDefinition>([
|
||||
[
|
||||
'showWeekNumbers',
|
||||
{
|
||||
defaultValue: false,
|
||||
description: 'Afficher les numéros de semaine',
|
||||
},
|
||||
],
|
||||
[
|
||||
'samediMalin',
|
||||
{
|
||||
defaultValue: true,
|
||||
description: 'Activer le Samedi Malin',
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
private readonly signals = new Map<string, WritableSignal<boolean>>();
|
||||
|
||||
readonly settingsArray: ReadonlyArray<{
|
||||
id: string;
|
||||
signal: WritableSignal<boolean>;
|
||||
description: string;
|
||||
}>;
|
||||
|
||||
constructor() {
|
||||
for (const [id, def] of this.definitions) {
|
||||
const storageKey = `calendarSettings.${id}`;
|
||||
this.signals.set(id, storedSignal(storageKey, def.defaultValue, this.injector));
|
||||
}
|
||||
|
||||
this.settingsArray = Array.from(this.definitions.entries()).map(([id, def]) => ({
|
||||
id,
|
||||
signal: this.signals.get(id)!,
|
||||
description: def.description,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the signal for the given setting ID.
|
||||
* @throws Error if the setting ID doesn't exist
|
||||
*/
|
||||
get(id: string): WritableSignal<boolean> {
|
||||
const signal = this.signals.get(id);
|
||||
if (!signal) {
|
||||
throw new Error(`Setting with id "${id}" does not exist`);
|
||||
}
|
||||
return signal;
|
||||
}
|
||||
|
||||
getDescription(id: string): string {
|
||||
return this.definitions.get(id)?.description ?? '';
|
||||
}
|
||||
readonly showWeekNumbers = signal(false);
|
||||
readonly samediMalin = signal(true);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
import { DateCacheService } from './date-cache.service';
|
||||
|
||||
describe('DateCacheService', () => {
|
||||
let service: DateCacheService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
service = TestBed.inject(DateCacheService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should cache today date', () => {
|
||||
const today1 = service.getToday();
|
||||
const today2 = service.getToday();
|
||||
expect(today1).toBe(today2); // Same reference
|
||||
});
|
||||
|
||||
it('should cache today components', () => {
|
||||
const components1 = service.getTodayComponents();
|
||||
const components2 = service.getTodayComponents();
|
||||
expect(components1).toBe(components2); // Same reference
|
||||
});
|
||||
|
||||
it('should cache current month', () => {
|
||||
const month1 = service.getCurrentMonth();
|
||||
const month2 = service.getCurrentMonth();
|
||||
expect(month1).toBe(month2);
|
||||
});
|
||||
|
||||
it('should cache current year', () => {
|
||||
const year1 = service.getCurrentYear();
|
||||
const year2 = service.getCurrentYear();
|
||||
expect(year1).toBe(year2);
|
||||
});
|
||||
|
||||
it('should clear cache', () => {
|
||||
const year1 = service.getCurrentYear();
|
||||
service.clearCache();
|
||||
const year2 = service.getCurrentYear();
|
||||
expect(year1).toBe(year2); // Values should be the same even after clearing
|
||||
});
|
||||
|
||||
it('should return today with time normalized to 00:00:00.000', () => {
|
||||
const today = service.getToday();
|
||||
expect(today.getHours()).toBe(0);
|
||||
expect(today.getMinutes()).toBe(0);
|
||||
expect(today.getSeconds()).toBe(0);
|
||||
expect(today.getMilliseconds()).toBe(0);
|
||||
});
|
||||
|
||||
it('should return getNow() same as getToday()', () => {
|
||||
const now = service.getNow();
|
||||
const today = service.getToday();
|
||||
expect(now).toBe(today);
|
||||
});
|
||||
});
|
||||
@@ -1,105 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Service to cache and provide commonly used date values.
|
||||
* This reduces redundant Date object creation across the application.
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class DateCacheService {
|
||||
private _today: Date | null = null;
|
||||
private _todayComponents: { date: number; month: number; year: number } | null = null;
|
||||
private _currentMonth: number | null = null;
|
||||
private _currentYear: number | null = null;
|
||||
|
||||
/**
|
||||
* Get today's date (time set to 00:00:00.000)
|
||||
*/
|
||||
getToday(): Date {
|
||||
if (!this._today || this.isNewDay(this._today)) {
|
||||
this._today = new Date();
|
||||
this._today.setHours(0, 0, 0, 0);
|
||||
this._todayComponents = null; // Invalidate components cache
|
||||
}
|
||||
return this._today;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get today's date components (date, month, year) for efficient comparison
|
||||
*/
|
||||
getTodayComponents(): { date: number; month: number; year: number } {
|
||||
if (!this._todayComponents || (this._today && this.isNewDay(this._today))) {
|
||||
const today = this.getToday();
|
||||
this._todayComponents = {
|
||||
date: today.getDate(),
|
||||
month: today.getMonth(),
|
||||
year: today.getFullYear(),
|
||||
};
|
||||
}
|
||||
return this._todayComponents;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current month (0-11)
|
||||
*/
|
||||
getCurrentMonth(): number {
|
||||
if (this._currentMonth === null || this.isNewMonth()) {
|
||||
this._currentMonth = new Date().getMonth();
|
||||
}
|
||||
return this._currentMonth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current year
|
||||
*/
|
||||
getCurrentYear(): number {
|
||||
if (this._currentYear === null || this.isNewYear()) {
|
||||
this._currentYear = new Date().getFullYear();
|
||||
}
|
||||
return this._currentYear;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current date with time set to 00:00:00.000 (alias for getToday)
|
||||
*/
|
||||
getNow(): Date {
|
||||
return this.getToday();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a cached date is from a previous day
|
||||
*/
|
||||
private isNewDay(cachedDate: Date): boolean {
|
||||
const now = new Date();
|
||||
return (
|
||||
cachedDate.getDate() !== now.getDate() ||
|
||||
cachedDate.getMonth() !== now.getMonth() ||
|
||||
cachedDate.getFullYear() !== now.getFullYear()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if we're in a new month
|
||||
*/
|
||||
private isNewMonth(): boolean {
|
||||
return this._currentMonth !== null && this._currentMonth !== new Date().getMonth();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if we're in a new year
|
||||
*/
|
||||
private isNewYear(): boolean {
|
||||
return this._currentYear !== null && this._currentYear !== new Date().getFullYear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all caches (useful for testing)
|
||||
*/
|
||||
clearCache(): void {
|
||||
this._today = null;
|
||||
this._todayComponents = null;
|
||||
this._currentMonth = null;
|
||||
this._currentYear = null;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { ThemeService } from './theme-service';
|
||||
|
||||
describe('ThemeService', () => {
|
||||
let service: ThemeService;
|
||||
let service: ThemeService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
service = TestBed.inject(ThemeService);
|
||||
});
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ThemeService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should initialize with system preference', () => {
|
||||
expect(service.isLightMode()).toBeDefined();
|
||||
});
|
||||
|
||||
it('should toggle theme', () => {
|
||||
const initialMode = service.isLightMode();
|
||||
service.toggleTheme();
|
||||
expect(service.isLightMode()).toBe(!initialMode);
|
||||
});
|
||||
|
||||
it('should force light mode when specified', () => {
|
||||
service.toggleTheme(true);
|
||||
expect(service.isLightMode()).toBe(true);
|
||||
expect(document.body.classList.contains('light-mode')).toBe(true);
|
||||
expect(document.body.classList.contains('dark-mode')).toBe(false);
|
||||
});
|
||||
|
||||
it('should force dark mode when specified', () => {
|
||||
service.toggleTheme(false);
|
||||
expect(service.isLightMode()).toBe(false);
|
||||
expect(document.body.classList.contains('light-mode')).toBe(false);
|
||||
expect(document.body.classList.contains('dark-mode')).toBe(true);
|
||||
});
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,57 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
import { UserInputService } from './user-input-service';
|
||||
import { SelectableDayType, VacDay } from './calendar-service';
|
||||
|
||||
describe('UserInputService', () => {
|
||||
import { UserInputService } from './user-input-service';
|
||||
|
||||
describe('UserInput', () => {
|
||||
let service: UserInputService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(UserInputService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should initialize with vacation days array', () => {
|
||||
const vacations = service.vacationNumberSignal();
|
||||
expect(Array.isArray(vacations)).toBe(true);
|
||||
expect(vacations.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have vacation days with valid properties', () => {
|
||||
const vacations = service.vacationNumberSignal();
|
||||
vacations.forEach((day) => {
|
||||
expect(day.id).toBeDefined();
|
||||
expect(day.type).toBeDefined();
|
||||
expect(day.numberOfDays).toBeGreaterThanOrEqual(1);
|
||||
expect(day.numberOfDays).toBeLessThanOrEqual(9);
|
||||
expect(day.expiryDate).toBeInstanceOf(Date);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update vacation number signal', () => {
|
||||
const newVacations: VacDay[] = [
|
||||
{
|
||||
id: 'test-id',
|
||||
type: SelectableDayType.CP,
|
||||
numberOfDays: 5,
|
||||
expiryDate: new Date(),
|
||||
},
|
||||
];
|
||||
service.vacationNumberSignal.set(newVacations);
|
||||
expect(service.vacationNumberSignal()).toEqual(newVacations);
|
||||
});
|
||||
|
||||
it('should create a new vacation day', () => {
|
||||
const newDay = service.createVacationDay();
|
||||
expect(newDay.id).toBeDefined();
|
||||
expect(newDay.type).toBe(SelectableDayType.CP);
|
||||
expect(newDay.numberOfDays).toBe(1);
|
||||
expect(newDay.expiryDate).toBeInstanceOf(Date);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Injectable, signal } from '@angular/core';
|
||||
import { SelectableDayType, VacDay } from './calendar-service';
|
||||
import { Injectable, signal, PLATFORM_ID, inject } from '@angular/core';
|
||||
import { VacationsNumber } from './calendar-service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
@@ -9,44 +9,13 @@ export class UserInputService {
|
||||
return Math.floor(Math.random() * 9) + 1;
|
||||
}
|
||||
|
||||
private getInitialValues(): VacDay[] {
|
||||
return [
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
type: SelectableDayType.CP,
|
||||
numberOfDays: this.getRandomNumber(),
|
||||
// today + 365 days
|
||||
expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
type: SelectableDayType.RTT,
|
||||
numberOfDays: this.getRandomNumber(),
|
||||
expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
type: SelectableDayType.OTHER,
|
||||
numberOfDays: this.getRandomNumber(),
|
||||
expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
public createVacationDay(): VacDay {
|
||||
private getInitialValues(): VacationsNumber {
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
type: SelectableDayType.CP,
|
||||
numberOfDays: 1,
|
||||
expiryDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
|
||||
cp: this.getRandomNumber(),
|
||||
rtt: this.getRandomNumber(),
|
||||
other: this.getRandomNumber(),
|
||||
};
|
||||
}
|
||||
|
||||
readonly vacationNumberSignal = signal<VacDay[]>(this.getInitialValues());
|
||||
readonly remainingVacationDaysSignal = signal<VacDay[]>([]);
|
||||
readonly computeTriggerSignal = signal(0);
|
||||
|
||||
public requestComputation(): void {
|
||||
this.computeTriggerSignal.update((count) => count + 1);
|
||||
}
|
||||
readonly vacationNumberSignal = signal<VacationsNumber>(this.getInitialValues());
|
||||
}
|
||||
@@ -1,14 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
|
||||
import { UserSettingsService } from './user-settings-service';
|
||||
|
||||
describe('UserSettingsService', () => {
|
||||
let service: UserSettingsService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(UserSettingsService);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
import { signal, effect, WritableSignal, Injector, runInInjectionContext } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Checks if localStorage is available in the current environment.
|
||||
* @returns true if localStorage is accessible, false otherwise
|
||||
*/
|
||||
function isLocalStorageAvailable(): boolean {
|
||||
try {
|
||||
return typeof localStorage !== 'undefined' && localStorage !== null;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a signal that automatically persists its value to localStorage.
|
||||
*
|
||||
* The signal will:
|
||||
* - Initialize with the stored value from localStorage if available
|
||||
* - Fall back to the provided initial value if no stored value exists or parsing fails
|
||||
* - Automatically sync changes to localStorage with debouncing (300ms delay)
|
||||
* - Work safely in SSR and environments where localStorage is unavailable
|
||||
*
|
||||
* @template T - The type of value stored in the signal (must be JSON-serializable)
|
||||
* @param key - The localStorage key used to store the value
|
||||
* @param initialValue - The default value used when no stored value exists
|
||||
* @param injector - The Angular injector (use inject(Injector) to get current context)
|
||||
* @param debounceMs - Optional debounce delay in milliseconds (default: 300ms)
|
||||
* @returns A writable signal that persists to localStorage
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* const injector = inject(Injector);
|
||||
* const darkMode = storedSignal('theme.darkMode', false, injector);
|
||||
* darkMode.set(true); // Automatically saved to localStorage after 300ms
|
||||
* console.log(darkMode()); // true
|
||||
* ```
|
||||
*
|
||||
* @remarks
|
||||
* - Requires an Injector to create the effect in the proper context
|
||||
* - Values must be JSON-serializable (no functions, circular references, etc.)
|
||||
* - In SSR or when localStorage is unavailable, the signal works normally but won't persist
|
||||
* - Corrupted localStorage data is automatically cleared and reset to initial value
|
||||
* - localStorage writes are debounced to improve performance with frequent updates
|
||||
*/
|
||||
export function storedSignal<T>(
|
||||
key: string,
|
||||
initialValue: T,
|
||||
injector: Injector,
|
||||
debounceMs = 300,
|
||||
): WritableSignal<T> {
|
||||
let parsedValue = initialValue;
|
||||
|
||||
if (isLocalStorageAvailable()) {
|
||||
try {
|
||||
const storedValue = localStorage.getItem(key);
|
||||
if (storedValue) {
|
||||
parsedValue = JSON.parse(storedValue) as T;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
`Failed to parse stored value for key "${key}". Using initial value.`,
|
||||
error,
|
||||
);
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
// Ignore removal errors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const s = signal(parsedValue);
|
||||
|
||||
let timeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||
let isFirstRun = true;
|
||||
|
||||
runInInjectionContext(injector, () => {
|
||||
effect(() => {
|
||||
const value = s();
|
||||
|
||||
// Skip the first execution to avoid writing back what we just read
|
||||
if (isFirstRun) {
|
||||
isFirstRun = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any pending timeout
|
||||
if (timeoutId !== null) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
// Debounce the localStorage write
|
||||
timeoutId = setTimeout(() => {
|
||||
if (isLocalStorageAvailable()) {
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
`Failed to save value for key "${key}" to localStorage.`,
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
timeoutId = null;
|
||||
}, debounceMs);
|
||||
});
|
||||
});
|
||||
|
||||
return s;
|
||||
}
|
||||
+9
-10
@@ -1,19 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta charset="utf-8">
|
||||
<title>VacOptimizer</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
+2
-1
@@ -2,6 +2,7 @@ import { BootstrapContext, bootstrapApplication } from '@angular/platform-browse
|
||||
import { App } from './app/app';
|
||||
import { config } from './app/app.config.server';
|
||||
|
||||
const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
|
||||
const bootstrap = (context: BootstrapContext) =>
|
||||
bootstrapApplication(App, config, context);
|
||||
|
||||
export default bootstrap;
|
||||
+2
-1
@@ -2,4 +2,5 @@ import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig).catch((err) => console.error(err));
|
||||
bootstrapApplication(App, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
+3
-1
@@ -41,7 +41,9 @@ app.use(
|
||||
app.use((req, res, next) => {
|
||||
angularApp
|
||||
.handle(req)
|
||||
.then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
|
||||
.then((response) =>
|
||||
response ? writeResponseToNodeResponse(response, res) : next(),
|
||||
)
|
||||
.catch(next);
|
||||
});
|
||||
|
||||
|
||||
+9
-3
@@ -4,8 +4,14 @@
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": ["node"]
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["src/**/*.spec.ts"]
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
+1
-1
@@ -31,4 +31,4 @@
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+7
-3
@@ -4,7 +4,11 @@
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": ["jasmine"]
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*.ts"]
|
||||
}
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user