Merge pull request #19 from BergkampHUN/feature/update-angular

Feature/update angular
BergkampHUN · Nov 5, 2024 · d972843 · d972843
2 parents ba0f519 + a1bd475
commit d972843
Show file tree

Hide file tree

Showing 28 changed files with 4,842 additions and 4,543 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,35 +15,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.7",
-    "@angular/common": "^17.0.7",
-    "@angular/compiler": "^17.0.7",
-    "@angular/core": "^17.0.7",
-    "@angular/forms": "^17.0.7",
-    "@angular/platform-browser": "^17.0.7",
-    "@angular/platform-browser-dynamic": "^17.0.7",
-    "@angular/router": "^17.0.7",
-    "chart.js": "^4.4.1",
-    "date-fns": "^2.30.0",
+    "@angular/animations": "^18.2.10",
+    "@angular/common": "^18.2.10",
+    "@angular/compiler": "^18.2.10",
+    "@angular/core": "^18.2.10",
+    "@angular/forms": "^18.2.10",
+    "@angular/platform-browser": "^18.2.10",
+    "@angular/platform-browser-dynamic": "^18.2.10",
+    "@angular/router": "^18.2.10",
+    "chart.js": "^4.4.6",
+    "date-fns": "^4.1.0",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.1.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.11",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular/cli": "~17.0.7",
-    "@angular/compiler-cli": "^17.0.7",
+    "@angular-devkit/build-angular": "^18.2.11",
+    "@angular/cli": "~18.2.11",
+    "@angular/compiler-cli": "^18.2.10",
     "@types/jasmine": "~5.1.4",
-    "angular-cli-ghpages": "^1.0.7",
-    "jasmine-core": "~5.1.1",
-    "karma": "~6.4.2",
+    "angular-cli-ghpages": "^2.0.3",
+    "jasmine-core": "~5.4.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.4"
   }
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MiteTestComponent } from './mite-test/mite-test.component';
+
 
 const routes: Routes = [
   {
     path: 'test',
-    component: MiteTestComponent,
+    loadComponent: () => import('./mite-test/mite-test.component').then(m => m.MiteTestComponent),
   },
 ];
 

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -5,13 +5,11 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
+    imports: [
+        RouterTestingModule,
         AppComponent
-      ],
-    }).compileComponents();
+    ],
+}).compileComponents();
   });
 
   it('should create the app', () => {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,10 +1,21 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { HeaderComponent } from './header/header.component';
+import { WorkingOnComponent } from './working-on/working-on.component';
+import { CardComponent } from './card/card.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None,
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [
+        HeaderComponent,
+        WorkingOnComponent,
+        CardComponent,
+        RouterOutlet,
+    ],
 })
 export class AppComponent implements OnInit {
   title = 'project-aurora';

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
diff --git a/src/app/card/card.component.html b/src/app/card/card.component.html
@@ -1,24 +1,28 @@
 <div class="default-card card-wrapper">
   <div class="flex align-items-center gap-2 test">
-    <p-button
-      icon="pi pi-chevron-left"
-      size="small"
-      *ngIf="dateSelector"
-      [rounded]="true"
-      [text]="true"
+    @if (dateSelector) {
+      <p-button
+        icon="pi pi-chevron-left"
+        size="small"
+        [rounded]="true"
+        [text]="true"
       (onClick)="changeDate(-1)"></p-button>
+    }
     <div class="flex align-items-center gap-2">
       <h2>{{ date | niceDateName }}</h2>
       <i class="pi pi-check-circle"></i>
     </div>
-    <p-button
-      icon="pi pi-chevron-right"
-      size="small"
-      *ngIf="dateSelector"
-      [rounded]="true"
-      [text]="true"
+    @if (dateSelector) {
+      <p-button
+        icon="pi pi-chevron-right"
+        size="small"
+        [rounded]="true"
+        [text]="true"
       (onClick)="changeDate(1)"></p-button>
+    }
   </div>
   <app-summaries [date]="date"></app-summaries>
-  <app-time-entry *ngFor="let entry of groupedTimeEntries" [timeEntryGroup]="entry" />
+  @for (entry of groupedTimeEntries; track entry) {
+    <app-time-entry [timeEntryGroup]="entry" />
+  }
 </div>
diff --git a/src/app/card/card.component.spec.ts b/src/app/card/card.component.spec.ts
@@ -8,8 +8,8 @@ describe('CardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CardComponent ]
-    })
+    imports: [CardComponent]
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(CardComponent);

diff --git a/src/app/card/card.component.ts b/src/app/card/card.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, inject } from '@angular/core';
 import { MiteService } from '../services/mite.service';
 import { GrouppedTimeEntries } from '../interfaces/mite';
 import { TimeEntryComponent } from './time-entry/time-entry.component';
-import { CommonModule } from '@angular/common';
+
 import { ChartModule } from 'primeng/chart';
 import { HoursAndMinutesPipe } from '../pipes/hours-and-minutes.pipe';
 import { NiceDateNamePipe } from '../pipes/nice-date-name.pipe';
@@ -12,7 +12,7 @@ import { SummariesComponent } from './summaries/summaries.component';
 @Component({
   selector: 'app-card',
   standalone: true,
-  imports: [CommonModule, TimeEntryComponent, NiceDateNamePipe, ButtonModule, SummariesComponent],
+  imports: [TimeEntryComponent, NiceDateNamePipe, ButtonModule, SummariesComponent],
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss'],
 })

diff --git a/src/app/card/summaries/summaries.component.html b/src/app/card/summaries/summaries.component.html
@@ -6,7 +6,7 @@
     <span class="time-bold chivo">05:47</span>
   </div>
   <div class="time-tracker-main-middle">
-    <ng-container *ngFor="let service of services">
+    @for (service of services; track service) {
       <div
         class="flex align-items-center service-time-wrapper cursor-pointer"
         [ngClass]="servicesData[service.shortName].color + '-text'"
@@ -24,12 +24,13 @@
           {{ service.minutes | hoursAndMinutes }}
         </span>
       </div>
-    </ng-container>
+    }
   </div>
-  <p-chart
-    *ngIf="dataLoaded"
-    type="doughnut"
-    [data]="chartData"
-    [options]="chartOptions"
+  @if (dataLoaded) {
+    <p-chart
+      type="doughnut"
+      [data]="chartData"
+      [options]="chartOptions"
     [style]="{ width: '25%' }"></p-chart>
+  }
 </div>
diff --git a/src/app/card/time-entry/time-entry.component.html b/src/app/card/time-entry/time-entry.component.html
@@ -7,16 +7,18 @@
     [ngClass]="
       timeEntryGroup.serviceName ? servicesData[timeEntryGroup.serviceName].color + '-text' : ''
     ">
-    <i
-      class="chevron pi"
-      *ngIf="!timeEntryGroup.entry && !timeEntryGroup.serviceName"
+    @if (!timeEntryGroup.entry && !timeEntryGroup.serviceName) {
+      <i
+        class="chevron pi"
       [ngClass]="{ 'pi-chevron-right': collapsed, 'pi-chevron-down': !collapsed }"></i>
-    <div
-      class="service-icon"
-      *ngIf="timeEntryGroup.serviceName"
-      [ngClass]="[servicesData[timeEntryGroup.serviceName].color + '-bg']">
-      <i [ngClass]="[servicesData[timeEntryGroup.serviceName].icon]"></i>
-    </div>
+    }
+    @if (timeEntryGroup.serviceName) {
+      <div
+        class="service-icon"
+        [ngClass]="[servicesData[timeEntryGroup.serviceName].color + '-bg']">
+        <i [ngClass]="[servicesData[timeEntryGroup.serviceName].icon]"></i>
+      </div>
+    }
     <div class="text-base" [ngClass]="{ 'font-bold': !timeEntryGroup.entry }">
       {{ timeEntryGroup.entry ? timeEntryGroup.entry.note || '-' : timeEntryGroup.name }}
     </div>
@@ -29,9 +31,10 @@
     {{ timeEntryGroup.entry?.tracking?.minutes || timeEntryGroup.minutes | hoursAndMinutes }}
   </div>
 </div>
-<ng-container *ngIf="!collapsed">
-  <app-time-entry
-    class="block ml-3"
-    *ngFor="let entry of timeEntryGroup.items"
+@if (!collapsed) {
+  @for (entry of timeEntryGroup.items; track entry) {
+    <app-time-entry
+      class="block ml-3"
     [timeEntryGroup]="entry"></app-time-entry>
-</ng-container>
+  }
+}
diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
@@ -8,8 +8,8 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
-    })
+    imports: [HeaderComponent]
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { TimerComponent } from '../timer/timer.component';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: true,
+    imports: [TimerComponent, ButtonModule]
 })
 export class HeaderComponent {
 

diff --git a/src/app/mite-test/mite-test.component.html b/src/app/mite-test/mite-test.component.html
@@ -5,12 +5,16 @@
 
 <p>Projects:</p>
 <ul>
-  <li *ngFor="let project of projects">{{ project | json }}</li>
+  @for (project of projects; track project) {
+    <li>{{ project | json }}</li>
+  }
 </ul>
 
 <p>Services:</p>
 <ul>
-  <li *ngFor="let service of services">{{ service | json }}</li>
+  @for (service of services; track service) {
+    <li>{{ service | json }}</li>
+  }
 </ul>
 
 <p>Tracker:</p>
@@ -34,18 +38,22 @@
 
 <p>Time Entries:</p>
 <ul>
-  <li *ngFor="let timeEntry of timeEntries">
-    {{ timeEntry.time_entry | json }}
-    <button (click)="deleteTimeEntry(timeEntry.time_entry.id)">Delete</button>
-  </li>
+  @for (timeEntry of timeEntries; track timeEntry) {
+    <li>
+      {{ timeEntry.time_entry | json }}
+      <button (click)="deleteTimeEntry(timeEntry.time_entry.id)">Delete</button>
+    </li>
+  }
 </ul>
 
 <p>Time Entries for 2022-01-20:</p>
 <ul>
-  <li *ngFor="let timeEntry of timeEntries2">
-    {{ timeEntry.time_entry | json }}
-    <button (click)="deleteTimeEntry(timeEntry.time_entry.id)">Delete</button>
-  </li>
+  @for (timeEntry of timeEntries2; track timeEntry) {
+    <li>
+      {{ timeEntry.time_entry | json }}
+      <button (click)="deleteTimeEntry(timeEntry.time_entry.id)">Delete</button>
+    </li>
+  }
 </ul>
 
 <p>Time entry with id 113157544:</p>