Skip to content

Commit

Permalink
BREAKING CHANGE: update all code to angular 17 standalone components
Browse files Browse the repository at this point in the history
  • Loading branch information
George-Spanos committed Feb 23, 2024
1 parent 2032830 commit a915afd
Show file tree
Hide file tree
Showing 74 changed files with 8,159 additions and 25,661 deletions.
4 changes: 4 additions & 0 deletions src/ui/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Nx 18 enables using plugins to infer targets by default
# This is disabled for existing workspaces to maintain compatibility
# For more info, see: https://nx.dev/concepts/inferred-tasks
NX_ADD_PLUGINS=false
4 changes: 2 additions & 2 deletions src/ui/.npmrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
@moby-it:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=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
@moby-it:registry=https://npm.pkg.github.com/
14 changes: 5 additions & 9 deletions src/ui/apps/client/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,32 +48,28 @@
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "client:build:production"
"buildTarget": "client:build:production"
},
"development": {
"browserTarget": "client:build:development"
"buildTarget": "client:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "client:build"
"buildTarget": "client:build"
}
},
"lint": {
"executor": "@nx/eslint:lint",
"options": {
"lintFilePatterns": ["apps/client/**/*.ts", "apps/client/**/*.html"]
}
"executor": "@nx/eslint:lint"
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/apps/client"],
"options": {
"jestConfig": "apps/client/jest.config.ts",
"passWithNoTests": true
"jestConfig": "apps/client/jest.config.ts"
}
}
},
Expand Down
4 changes: 3 additions & 1 deletion src/ui/apps/client/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<ppo-top-bar></ppo-top-bar>
<router-outlet></router-outlet>
<ppo-loader *ngIf="loading$ | ngrxPush"></ppo-loader>
@if (loading$ | ngrxPush) {
<ppo-loader></ppo-loader>
}
9 changes: 7 additions & 2 deletions src/ui/apps/client/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LoaderService } from '@ppo/shared/ui';
import { LoaderComponent, LoaderService } from '@ppo/shared/ui';
import { TopBarComponent } from './top-bar/top-bar.component';
import { RouterModule } from '@angular/router';
import { PushPipe } from '@ngrx/component';
@Component({
selector: 'ppo-root',
imports: [TopBarComponent, RouterModule, LoaderComponent, PushPipe],
templateUrl: './app.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true
})
export class AppComponent {
constructor(private loaderService: LoaderService) {}
constructor(private loaderService: LoaderService) { }
loading$ = this.loaderService.loading$;
}
34 changes: 4 additions & 30 deletions src/ui/apps/client/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,65 +1,39 @@
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LetDirective, PushPipe } from '@ngrx/component';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AuthDomainModule } from '@ppo/auth/domain';
import { AuthFeatureUserFormModule } from '@ppo/auth/feature-user-form';
import { PlayDomainModule } from '@ppo/play/domain';
import { API_URL } from '@ppo/shared/config';
import { SharedUiModule } from '@ppo/shared/ui';
import { LoaderComponent, SharedUiModule } from '@ppo/shared/ui';
import { UserDomainModule } from '@ppo/user/domain';
import { ToastrModule } from 'ngx-toastr';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import { GlobalErrorHandler } from './errorHandler';
import { TokenInterceptor } from './interceptors';
import { TopBarComponent } from './top-bar/top-bar.component';
import { UserStatusComponent } from './top-bar/user-status/user-status.component';
@NgModule({
declarations: [
AppComponent,
TopBarComponent,
UserStatusComponent,
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
AppRoutingModule,
PushPipe,
LetDirective,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production, // Restrict extension to log-only mode
autoPause: true, // Pauses recording actions and state changes when the extension window is not open
connectInZone: true
}),
PlayDomainModule,
AuthDomainModule,
SharedUiModule,
UserDomainModule,
AuthFeatureUserFormModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',
timeOut: 5000,
closeButton: true,
}), // ToastrModule added
],
providers: [
{ provide: API_URL, useValue: environment.apiUrl },
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
},
{ provide: ErrorHandler, useClass: GlobalErrorHandler },
],
bootstrap: [AppComponent],
})
export class AppModule { }
40 changes: 0 additions & 40 deletions src/ui/apps/client/src/app/app.routing.module.ts

This file was deleted.

6 changes: 5 additions & 1 deletion src/ui/apps/client/src/app/top-bar/top-bar.component.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { Component } from '@angular/core';
import { UserStatusComponent } from './user-status/user-status.component';
import { RouterModule } from '@angular/router';
@Component({
selector: 'ppo-top-bar',
imports: [UserStatusComponent, RouterModule],
templateUrl: './top-bar.component.html',
styles: [`
:host {
display: block;
z-index: 10;
}
`]
`],
standalone: true
})
export class TopBarComponent { }
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,95 @@
(click)="username ? navigateToProfile():toggleUserForm()"
(mouseenter)="onMouseEnter()"
(mouseleave)="onMouseLeave()"
>
<span class="link" *ngIf="username; else notLoggedIn"
>Hello, {{ username }}</span
>
<ng-template #notLoggedIn>
<span class="link"> SIGN IN </span>
</ng-template>
<svg
*ngIf="!hovering"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 26.6667V13.3333C5 8.73096 8.73096 5 13.3333 5H26.6667C31.269 5 35 8.73096 35 13.3333V26.6667C35 31.269 31.269 35 26.6667 35H13.3333C8.73096 35 5 31.269 5 26.6667Z"
stroke="#83838A"
stroke-width="2"
/>
<path
d="M27.5 24.1666C27.5 24.1666 25 27.5 20 27.5C15 27.5 12.5 24.1666 12.5 24.1666"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14.1667 16.6667C13.7064 16.6667 13.3333 16.2936 13.3333 15.8333C13.3333 15.3731 13.7064 15 14.1667 15C14.6269 15 15 15.3731 15 15.8333C15 16.2936 14.6269 16.6667 14.1667 16.6667Z"
fill="#83838A"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.8332 16.6667C25.3729 16.6667 24.9998 16.2936 24.9998 15.8333C24.9998 15.3731 25.3729 15 25.8332 15C26.2934 15 26.6665 15.3731 26.6665 15.8333C26.6665 16.2936 26.2934 16.6667 25.8332 16.6667Z"
fill="#83838A"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
*ngIf="hovering"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 26.6667V13.3333C5 8.73096 8.73096 5 13.3333 5H26.6667C31.269 5 35 8.73096 35 13.3333V26.6667C35 31.269 31.269 35 26.6667 35H13.3333C8.73096 35 5 31.269 5 26.6667Z"
fill="#FAFAFB"
stroke="#FAFAFB"
stroke-width="2"
/>
<path
d="M27.5 24.1666C27.5 24.1666 25 27.5 20 27.5C15 27.5 12.5 24.1666 12.5 24.1666"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14.1667 16.6667C13.7064 16.6667 13.3333 16.2936 13.3333 15.8333C13.3333 15.3731 13.7064 15 14.1667 15C14.6269 15 15 15.3731 15 15.8333C15 16.2936 14.6269 16.6667 14.1667 16.6667Z"
fill="#191927"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.8332 16.6667C25.3729 16.6667 24.9998 16.2936 24.9998 15.8333C24.9998 15.3731 25.3729 15 25.8332 15C26.2934 15 26.6665 15.3731 26.6665 15.8333C26.6665 16.2936 26.2934 16.6667 25.8332 16.6667Z"
fill="#191927"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</ng-container>
<ppo-user-form
*ngIf="userFormVisible"
(clickedOutside)="toggleUserForm()"
></ppo-user-form>
@if (username) {
<span class="link"
>Hello, {{ username }}</span
>
} @else {
<span class="link"> SIGN IN </span>
}
@if (!hovering) {
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 26.6667V13.3333C5 8.73096 8.73096 5 13.3333 5H26.6667C31.269 5 35 8.73096 35 13.3333V26.6667C35 31.269 31.269 35 26.6667 35H13.3333C8.73096 35 5 31.269 5 26.6667Z"
stroke="#83838A"
stroke-width="2"
/>
<path
d="M27.5 24.1666C27.5 24.1666 25 27.5 20 27.5C15 27.5 12.5 24.1666 12.5 24.1666"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14.1667 16.6667C13.7064 16.6667 13.3333 16.2936 13.3333 15.8333C13.3333 15.3731 13.7064 15 14.1667 15C14.6269 15 15 15.3731 15 15.8333C15 16.2936 14.6269 16.6667 14.1667 16.6667Z"
fill="#83838A"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.8332 16.6667C25.3729 16.6667 24.9998 16.2936 24.9998 15.8333C24.9998 15.3731 25.3729 15 25.8332 15C26.2934 15 26.6665 15.3731 26.6665 15.8333C26.6665 16.2936 26.2934 16.6667 25.8332 16.6667Z"
fill="#83838A"
stroke="#83838A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
}
@if (hovering) {
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 26.6667V13.3333C5 8.73096 8.73096 5 13.3333 5H26.6667C31.269 5 35 8.73096 35 13.3333V26.6667C35 31.269 31.269 35 26.6667 35H13.3333C8.73096 35 5 31.269 5 26.6667Z"
fill="#FAFAFB"
stroke="#FAFAFB"
stroke-width="2"
/>
<path
d="M27.5 24.1666C27.5 24.1666 25 27.5 20 27.5C15 27.5 12.5 24.1666 12.5 24.1666"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14.1667 16.6667C13.7064 16.6667 13.3333 16.2936 13.3333 15.8333C13.3333 15.3731 13.7064 15 14.1667 15C14.6269 15 15 15.3731 15 15.8333C15 16.2936 14.6269 16.6667 14.1667 16.6667Z"
fill="#191927"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.8332 16.6667C25.3729 16.6667 24.9998 16.2936 24.9998 15.8333C24.9998 15.3731 25.3729 15 25.8332 15C26.2934 15 26.6665 15.3731 26.6665 15.8333C26.6665 16.2936 26.2934 16.6667 25.8332 16.6667Z"
fill="#191927"
stroke="#191927"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
}
</div>
</ng-container>
@if (userFormVisible) {
<ppo-user-form
(clickedOutside)="toggleUserForm()"
></ppo-user-form>
}
Loading

0 comments on commit a915afd

Please sign in to comment.