diff --git a/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html b/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html index 8935485..745466c 100644 --- a/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html +++ b/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html @@ -1 +1 @@ - + diff --git a/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts b/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts index ca42fa0..62e04be 100644 --- a/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts +++ b/src/app/backoffice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts @@ -1,5 +1,7 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { CommonModule, TitleCasePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; import { ChartData, ChartDataset, ChartOptions } from 'chart.js'; @@ -8,7 +10,6 @@ import { Observable, combineLatest, filter, map, startWith } from 'rxjs'; import { CertificateStateModule } from 'src/app/backoffice/tables/certificate/state/certificate-state.module'; import { certificateActions } from 'src/app/backoffice/tables/certificate/state/certificate.actions'; import { certificateReducer } from 'src/app/backoffice/tables/certificate/state/certificate.reducer'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { TranslationProvider } from 'src/app/shared/models/translation-provider.model'; import { LanguagesModule } from 'src/app/shared/modules/languages.module'; import { publicLanguageReducer } from 'src/app/shared/state/languages/public-language.reducer'; @@ -27,7 +28,7 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem private translateSrv = inject(TranslateService); private titleCasePipe = inject(TitleCasePipe); - language$: Observable = this.store.select(publicLanguageReducer.getOne); + language$ = this.store.select(publicLanguageReducer.getOne); chartOptions$: Observable = this.translateSrv.onLangChange.pipe( startWith(this.translateSrv.currentLang), map(() => ({ @@ -84,6 +85,8 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem }, })), ); + chartOptions$$ = toSignal(this.chartOptions$); + chartData$: Observable> = combineLatest([ this.store.select(certificateReducer.getAll), this.language$, @@ -135,8 +138,9 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem return res; }), ); + chartData$$ = toSignal(this.chartData$); - ngOnInit(): void { + ngOnInit() { this.store.dispatch(certificateActions.loadAll({})); } } diff --git a/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html b/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html index 8935485..745466c 100644 --- a/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html +++ b/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html @@ -1 +1 @@ - + diff --git a/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts b/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts index a4a57f3..0e1c1f5 100644 --- a/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts +++ b/src/app/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { CommonModule, TitleCasePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; import { ChartData, ChartDataset, ChartOptions } from 'chart.js'; import { ChartModule } from 'primeng/chart'; import { Observable, combineLatest, map, startWith } from 'rxjs'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { PositionStateModule } from 'src/app/backoffice/tables/position/state/position-state.module'; import { positionActions } from 'src/app/backoffice/tables/position/state/position.actions'; import { positionReducer } from 'src/app/backoffice/tables/position/state/position.reducer'; @@ -28,7 +28,7 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement private translateSrv = inject(TranslateService); private titleCasePipe = inject(TitleCasePipe); - language$: Observable = this.store.select(publicLanguageReducer.getOne); + language$ = this.store.select(publicLanguageReducer.getOne); chartOptions$: Observable = this.translateSrv.onLangChange.pipe( startWith(this.translateSrv.currentLang), map(() => ({ @@ -89,6 +89,8 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement }, })), ); + chartOptions$$ = toSignal(this.chartOptions$); + chartData$: Observable> = combineLatest([ this.store.select(positionReducer.getAll), this.language$, @@ -130,8 +132,9 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement return res; }), ); + chartData$$ = toSignal(this.chartData$); - ngOnInit(): void { + ngOnInit() { this.store.dispatch(positionActions.loadAll({})); } } diff --git a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html index c9e9f2f..479313d 100644 --- a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html +++ b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html @@ -1 +1 @@ - + diff --git a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts index 5f1c31e..50089b0 100644 --- a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts +++ b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { CommonModule, TitleCasePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; import { ChartData, ChartDataset, ChartOptions } from 'chart.js'; import { ChartModule } from 'primeng/chart'; import { Observable, combineLatest, map, startWith } from 'rxjs'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { PositionStateModule } from 'src/app/backoffice/tables/position/state/position-state.module'; import { positionActions } from 'src/app/backoffice/tables/position/state/position.actions'; import { positionReducer } from 'src/app/backoffice/tables/position/state/position.reducer'; @@ -28,7 +28,7 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O private translateSrv = inject(TranslateService); private titleCasePipe = inject(TitleCasePipe); - language$: Observable = this.store.select(publicLanguageReducer.getOne); + language$ = this.store.select(publicLanguageReducer.getOne); chartOptions$: Observable = this.translateSrv.onLangChange.pipe( startWith(this.translateSrv.currentLang), map(() => ({ @@ -85,6 +85,8 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O }, })), ); + chartOptions$$ = toSignal(this.chartOptions$); + chartData$: Observable> = combineLatest([ this.store.select(positionReducer.getAll), this.language$, @@ -114,8 +116,9 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O return res; }), ); + chartData$$ = toSignal(this.chartData$); - ngOnInit(): void { + ngOnInit() { this.store.dispatch(positionActions.loadAll({})); } } diff --git a/src/app/backoffice/layout/backoffice/header/header.component.html b/src/app/backoffice/layout/backoffice/header/header.component.html index 8355110..9d97051 100644 --- a/src/app/backoffice/layout/backoffice/header/header.component.html +++ b/src/app/backoffice/layout/backoffice/header/header.component.html @@ -5,12 +5,12 @@

Personal Web

- +
-

{{ (user$ | async)?.email }}

+

{{ user$$()?.email }}

diff --git a/src/app/backoffice/layout/backoffice/header/header.component.ts b/src/app/backoffice/layout/backoffice/header/header.component.ts index 499b5f0..940eeaf 100644 --- a/src/app/backoffice/layout/backoffice/header/header.component.ts +++ b/src/app/backoffice/layout/backoffice/header/header.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { MenuItem } from 'primeng/api'; @@ -18,9 +19,11 @@ export class HeaderComponent { private translateSrv = inject(TranslateService); sidebarVisible = false; + user$ = this.authService.getCurrentUser(); + user$$ = toSignal(this.user$); - public breadcrumbs$: Observable = this.router.events.pipe( + breadcrumbs$: Observable = this.router.events.pipe( startWith(undefined), debounceTime(200), map(() => { @@ -34,6 +37,10 @@ export class HeaderComponent { })); }), ); + breadcrumbs$$ = toSignal(this.breadcrumbs$, { + initialValue: [], + }); + menus = [ { routerLink: '/backoffice/certificates', diff --git a/src/app/backoffice/tables/skill-type/services/skill-type.service.ts b/src/app/backoffice/tables/skill-type/services/skill-type.service.ts index f111793..dea3e48 100644 --- a/src/app/backoffice/tables/skill-type/services/skill-type.service.ts +++ b/src/app/backoffice/tables/skill-type/services/skill-type.service.ts @@ -13,7 +13,7 @@ export class SkillTypeService extends CommonService { super( supabaseClient, skillTypeNames.name(Naming.SNAKE_CASE, NumberMode.PLURAL), - 'id, name_translations, description_translations', + 'id, name_translations, description_translations, skills ( * )', '*, "skills": "skills" ( * )', 'name_translations', ); diff --git a/src/app/website/components/experience/experience.component.html b/src/app/website/components/experience/experience.component.html index eecd265..ff373f0 100644 --- a/src/app/website/components/experience/experience.component.html +++ b/src/app/website/components/experience/experience.component.html @@ -1,88 +1,86 @@ - - @switch (positionsActionStatus$ | async) { - @case (ActionStatus.SUCCESS) { -
-
    - @for (positionGrouped of positionsGrouped$ | async; track positionGrouped) { -
  • -
    -
    - @switch (positionGrouped.company.type) { - @case (CompanyType.SCHOOL) { - - } - @case (CompanyType.COMPANY) { - - } +@switch (positionsActionStatus$$()) { + @case (ActionStatus.SUCCESS) { +
    +
      + @for (positionGrouped of positionsGrouped$$(); track positionGrouped) { +
    • +
      +
      + @switch (positionGrouped.company.type) { + @case (CompanyType.SCHOOL) { + } -
      -
      -

      - @if (positionGrouped.company.url) { - {{ positionGrouped.company.name }} - } @else { - {{ positionGrouped.company.name }} - } -

      - ({{ positionGrouped.time }}) -
      -
      -
      -
        - @for (position of positionGrouped.positions; track position) { -
      • -
        - {{ getTranslation(language?.acronym, position?.nameTranslations) }} -
        -
        - {{ - (position.dateFrom | date: 'MM-yyyy') + - ' - ' + - (position.dateTo ? (position.dateTo | date: 'MM-yyyy') : ('general.present' | translate)) - }} -
        -
        • + @case (CompanyType.COMPANY) { + } -
      -
      -
      • - } -
    -
    - } - @case (ActionStatus.PENDING) { -
    -
      - @for (skeleton of [0, 1, 2, 3]; track skeleton) { -
    • -
      - + }
      -
      -
        - @for (position of [0, 1]; track position) { -
      • -
        - -
        -
        - -
        -
        • +
        +

        + @if (positionGrouped.company.url) { + {{ positionGrouped.company.name }} + } @else { + {{ positionGrouped.company.name }} } -

      + + ({{ positionGrouped.time }})
      -
      • - } -
    -
    - } - @case (ActionStatus.ERROR) { - - } +
    +
    +
      + @for (position of positionGrouped.positions; track position) { +
    • +
      + {{ getTranslation(language$$()?.acronym, position?.nameTranslations) }} +
      +
      + {{ + (position.dateFrom | date: 'MM-yyyy') + + ' - ' + + (position.dateTo ? (position.dateTo | date: 'MM-yyyy') : ('general.present' | translate)) + }} +
      +
      • + } +
    +
    +
    • + } +
+
+ } + @case (ActionStatus.PENDING) { +
+
    + @for (skeleton of [0, 1, 2, 3]; track skeleton) { +
  • +
    + +
    +
    +
      + @for (position of [0, 1]; track position) { +
    • +
      + +
      +
      + +
      +
      • + } +
    +
    +
    • + } +
+
+ } + @case (ActionStatus.ERROR) { + } - +} diff --git a/src/app/website/components/experience/experience.component.ts b/src/app/website/components/experience/experience.component.ts index faa222b..27252ee 100644 --- a/src/app/website/components/experience/experience.component.ts +++ b/src/app/website/components/experience/experience.component.ts @@ -11,6 +11,7 @@ import { ViewChildren, inject, } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { faBriefcase, faGraduationCap } from '@fortawesome/free-solid-svg-icons'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; @@ -18,7 +19,6 @@ import { Observable, Subject, combineLatest } from 'rxjs'; import { filter, map, startWith, takeUntil } from 'rxjs/operators'; import { CompanyType } from 'src/app/backoffice/tables/company/models/company-type.model'; import { Company } from 'src/app/backoffice/tables/company/models/company.model'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { Position } from 'src/app/backoffice/tables/position/models/position.model'; import { positionActions } from 'src/app/backoffice/tables/position/state/position.actions'; import { positionReducer } from 'src/app/backoffice/tables/position/state/position.reducer'; @@ -52,12 +52,20 @@ export class ExperienceComponent extends TranslationProvider implements OnInit, @ViewChildren('position') positionElements!: QueryList>; positionElementStates = new Map(); - unsubscribe$: Subject = new Subject(); - language$: Observable = this.store.select(publicLanguageReducer.getOne); - positionsActionStatus$: Observable = this.store.select(positionReducer.getAction).pipe( + unsubscribe$ = new Subject(); + + language$ = this.store.select(publicLanguageReducer.getOne); + language$$ = toSignal(this.language$); + + positionsActionStatus$ = this.store.select(positionReducer.getAction).pipe( filter((action) => !!action && action.type === ActionType.LOAD_MANY), + // eslint-disable-next-line @ngrx/avoid-mapping-selectors map((action) => (action ? action.status : ActionStatus.SUCCESS)), ); + positionsActionStatus$$ = toSignal(this.positionsActionStatus$, { + initialValue: ActionStatus.SUCCESS, + }); + positionsGrouped$: Observable = combineLatest([ this.store.select(positionReducer.getAll), this.translateSrv.onLangChange.pipe(startWith(undefined)), @@ -124,13 +132,19 @@ export class ExperienceComponent extends TranslationProvider implements OnInit, return positionsGroupedByCompanyAndTime; }), ); + positionsGrouped$$ = toSignal(this.positionsGrouped$, { + initialValue: [], + }); - ngOnDestroy(): void { - this.unsubscribe$.next(); - this.unsubscribe$.complete(); + ngOnInit() { + this.positionsGrouped$.pipe(takeUntil(this.unsubscribe$)).subscribe((positionsGrouped) => { + if (!positionsGrouped.length) { + this.store.dispatch(positionActions.loadAll({ payload: null })); + } + }); } - ngAfterViewChecked(): void { + ngAfterViewChecked() { this.positionElements.forEach((positionElement) => { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -146,12 +160,9 @@ export class ExperienceComponent extends TranslationProvider implements OnInit, }); } - ngOnInit(): void { - this.positionsGrouped$.pipe(takeUntil(this.unsubscribe$)).subscribe((positionsGrouped) => { - if (!positionsGrouped.length) { - this.store.dispatch(positionActions.loadAll({ payload: null })); - } - }); + ngOnDestroy() { + this.unsubscribe$.next(); + this.unsubscribe$.complete(); } getPositionEnterAnimationState(companyId: string | undefined): 'inViewport' | 'notInViewport' { diff --git a/src/app/website/components/tools/tools.component.html b/src/app/website/components/tools/tools.component.html index 6c84f39..a100c2b 100644 --- a/src/app/website/components/tools/tools.component.html +++ b/src/app/website/components/tools/tools.component.html @@ -1,30 +1,30 @@ -
+
@if (!loading) { -
    - @for (entity of entities; track entity.id) { -
  • - - {{ entity.name }} - - -
    -
    -
    -
    -
    -     -
    • - } -
+
    + @for (entity of entities; track entity.id) { +
  • + + {{ entity.name }} + + +
    +
    +
    +
    +
    +     +
    • + } +
} @else { -
    - @for (entity of [0, 1, 2, 3, 4, 5]; track entity) { -
  • - - - -
    • - } -
+
    + @for (entity of [0, 1, 2, 3, 4, 5]; track entity) { +
  • + + + +
    • + } +
}
diff --git a/src/app/website/components/tools/tools.component.ts b/src/app/website/components/tools/tools.component.ts index d4bd42c..f83789c 100644 --- a/src/app/website/components/tools/tools.component.ts +++ b/src/app/website/components/tools/tools.component.ts @@ -9,12 +9,8 @@ import { ViewChild, inject, } from '@angular/core'; -import { Store } from '@ngrx/store'; -import { Observable } from 'rxjs'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { Skill } from 'src/app/backoffice/tables/skill/models/skill.model'; import { TranslationProvider } from 'src/app/shared/models/translation-provider.model'; -import { publicLanguageReducer } from 'src/app/shared/state/languages/public-language.reducer'; @Component({ selector: 'app-tools', @@ -30,7 +26,6 @@ import { publicLanguageReducer } from 'src/app/shared/state/languages/public-lan ], }) export class ToolsComponent extends TranslationProvider implements AfterViewInit { - private store = inject(Store); private ref = inject(ChangeDetectorRef); @ViewChild('tools') toolsElement!: ElementRef; @@ -40,11 +35,10 @@ export class ToolsComponent extends TranslationProvider implements AfterViewInit required: true, }) entities: Skill[] = []; + @Input() loading: boolean = false; - language$: Observable = this.store.select(publicLanguageReducer.getOne); - ngAfterViewInit(): void { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { diff --git a/src/app/website/pages/certificates/certificates.component.html b/src/app/website/pages/certificates/certificates.component.html index 1da97f9..0d8c61b 100644 --- a/src/app/website/pages/certificates/certificates.component.html +++ b/src/app/website/pages/certificates/certificates.component.html @@ -1,98 +1,96 @@ - -
- @for (certificateGroup of certificateGroups$ | async; track certificateGroup) { -
-
-
-

{{ getTranslation(language?.acronym, certificateGroup?.nameTranslations) }}

-
- @if (certificateGroup && certificateGroup.certificates) { - - @for (certificate of orderByDate(certificateGroup.certificates); track certificate) { - -
-
-
-
-

{{ getTranslation(language?.acronym, certificate?.nameTranslations) }}

-
{{ certificate.date | date }}
-

{{ getTranslation(language?.acronym, certificate?.descriptionTranslations) }}

-
- +
+ @for (certificateGroup of certificateGroups$$(); track certificateGroup) { +
+
+
+

{{ getTranslation(language$$()?.acronym, certificateGroup?.nameTranslations) }}

+
+ @if (certificateGroup && certificateGroup.certificates) { + + @for (certificate of orderByDate(certificateGroup.certificates); track certificate) { + +
+
+
+
+

{{ getTranslation(language$$()?.acronym, certificate?.nameTranslations) }}

+
{{ certificate.date | date }}
+

{{ getTranslation(language$$()?.acronym, certificate?.descriptionTranslations) }}

+
+
-
-
- @if (certificate.web) { - - } - @if (certificate.microsoftStore) { - - } - @if (certificate.playStore) { - - } - @if (certificate.github) { - - } - @if (certificate.url) { - - } - @if (certificate.pdf) { - - } -
+
+
+ @if (certificate.web) { + + } + @if (certificate.microsoftStore) { + + } + @if (certificate.playStore) { + + } + @if (certificate.github) { + + } + @if (certificate.url) { + + } + @if (certificate.pdf) { + + }
- - } - - } -
+
+ + } + + }
- } - @switch (skillTypesActionStatus$ | async) { - @case (ActionStatus.PENDING) { -
-
-
-

{{ 'general.loading' | translate }}

-
- - @for (certificate of [0, 1, 2]; track certificate) { - - - - } - +
+ } + @switch (skillTypesActionStatus$$()) { + @case (ActionStatus.PENDING) { +
+
+
+

{{ 'general.loading' | translate }}

+ + @for (certificate of [0, 1, 2]; track certificate) { + + + + } +
- } - @case (ActionStatus.ERROR) { - - } +
+ } + @case (ActionStatus.ERROR) { + } -
- + } +
diff --git a/src/app/website/pages/certificates/certificates.component.ts b/src/app/website/pages/certificates/certificates.component.ts index 5515f09..7ced10b 100644 --- a/src/app/website/pages/certificates/certificates.component.ts +++ b/src/app/website/pages/certificates/certificates.component.ts @@ -11,6 +11,7 @@ import { ViewChildren, inject, } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { ResolveFn } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; @@ -20,7 +21,6 @@ import { CertificateGroup } from 'src/app/backoffice/tables/certificate-group/mo import { certificateGroupActions } from 'src/app/backoffice/tables/certificate-group/state/certificate-group.actions'; import { certificateGroupReducer } from 'src/app/backoffice/tables/certificate-group/state/certificate-group.reducer'; import { Certificate } from 'src/app/backoffice/tables/certificate/models/certificate.model'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; import { TranslationProvider } from 'src/app/shared/models/translation-provider.model'; import { ActionStatus, ActionType } from 'src/app/shared/state/common/common-state'; import { publicLanguageReducer } from 'src/app/shared/state/languages/public-language.reducer'; @@ -51,9 +51,12 @@ export class CertificatesComponent extends TranslationProvider implements OnInit private ref = inject(ChangeDetectorRef); unsubscribe$ = new Subject(); - language$: Observable = this.store.select(publicLanguageReducer.getOne); + + language$ = this.store.select(publicLanguageReducer.getOne); + language$$ = toSignal(this.language$); certificateGroups$: Observable = this.store.select(certificateGroupReducer.getAll).pipe( + // eslint-disable-next-line @ngrx/avoid-mapping-selectors map((certificateGroups) => [...certificateGroups].sort((a, b) => (b?.certificates?.length || 0) - (a?.certificates?.length || 0)), ), @@ -67,10 +70,19 @@ export class CertificatesComponent extends TranslationProvider implements OnInit return uniqueCertificateGroups; }), ); + certificateGroups$$ = toSignal(this.certificateGroups$, { + initialValue: [], + }); + skillTypesActionStatus$: Observable = this.store.select(certificateGroupReducer.getAction).pipe( filter((action) => !!action && action.type === ActionType.LOAD_MANY), + // eslint-disable-next-line @ngrx/avoid-mapping-selectors map((action) => (action ? action.status : ActionStatus.SUCCESS)), ); + skillTypesActionStatus$$ = toSignal(this.skillTypesActionStatus$, { + initialValue: ActionStatus.SUCCESS, + }); + certificateGroupCount$: BehaviorSubject = new BehaviorSubject(0); tabIndexes: { groupId: string; value: number }[] = []; @@ -104,13 +116,7 @@ export class CertificatesComponent extends TranslationProvider implements OnInit certificateElementStates = new Map(); certificateElementAnimationsDone: string[] = []; - ngOnDestroy(): void { - this.unsubscribe$.next(); - this.unsubscribe$.complete(); - this.store.dispatch(certificateGroupActions.unloadAll()); - } - - ngOnInit(): void { + ngOnInit() { zip([this.certificateGroups$.pipe(startWith([]), pairwise()), this.certificateGroupCount$]) .pipe(takeUntil(this.unsubscribe$)) .subscribe(([[previousCertificateGroups, currentCertificateGroups], count]) => { @@ -141,7 +147,7 @@ export class CertificatesComponent extends TranslationProvider implements OnInit }); } - ngAfterViewChecked(): void { + ngAfterViewChecked() { this.certificateElements.forEach((positionElement) => { if (this.certificateElementAnimationsDone.includes(positionElement.nativeElement.id)) { return; @@ -162,6 +168,12 @@ export class CertificatesComponent extends TranslationProvider implements OnInit }); } + ngOnDestroy() { + this.unsubscribe$.next(); + this.unsubscribe$.complete(); + this.store.dispatch(certificateGroupActions.unloadAll()); + } + orderByDate(certificates: Certificate[]): Certificate[] { if (certificates) { return [...certificates].sort((a, b) => { @@ -174,6 +186,7 @@ export class CertificatesComponent extends TranslationProvider implements OnInit getTabIndex(certificateGroup: CertificateGroup) { return this.tabIndexes.find((tabIndex) => tabIndex.groupId === certificateGroup.id); } + getIndex(certificateGroup: CertificateGroup) { this.getTabIndex(certificateGroup)!.value; } @@ -182,6 +195,7 @@ export class CertificatesComponent extends TranslationProvider implements OnInit const swiper = document.getElementById('.swiper' + certificateGroup.id) as unknown as Swiper; swiper.slideNext(); } + slidePrev(certificateGroup: CertificateGroup) { this.tabIndexes = this.tabIndexes.map((tabIndex) => { if (tabIndex.groupId === certificateGroup.id) { diff --git a/src/app/website/pages/home/home.component.html b/src/app/website/pages/home/home.component.html index 6476284..3d12ca2 100644 --- a/src/app/website/pages/home/home.component.html +++ b/src/app/website/pages/home/home.component.html @@ -1,59 +1,57 @@ - -
-
-
-
-
-
-

{{ 'home.cv' | translate }}

-
- -
-
-
-

{{ 'home.contact' | translate }}

-
- +
+
+
+
+
+
+

{{ 'home.cv' | translate }}

+
-
-
-

{{ 'home.trajectory' | translate }}

+
+
+

{{ 'home.contact' | translate }}

- + +
+
+
+
+

{{ 'home.trajectory' | translate }}

+
- @switch (skillTypesActionStatus$ | async) { - @case (ActionStatus.SUCCESS) { - @for (skillType of skillTypes$ | async; track skillType) { -
-
-
-

{{ getTranslation(language?.acronym, skillType?.nameTranslations) }}

-
- +
+@switch (skillTypesActionStatus$$()) { + @case (ActionStatus.SUCCESS) { + @for (skillType of skillTypes$$(); track skillType) { +
+
+
+

{{ getTranslation(language$$()?.acronym, skillType?.nameTranslations) }}

+
- } +
} - @case (ActionStatus.PENDING) { - @for (skillType of [0, 1, 2]; track skillType) { -
-
-
- -
- + } + @case (ActionStatus.PENDING) { + @for (skillType of [0, 1, 2]; track skillType) { +
+
+
+
+
- } - } - @case (ActionStatus.ERROR) { - +
} } - + @case (ActionStatus.ERROR) { + + } +}





diff --git a/src/app/website/pages/home/home.component.ts b/src/app/website/pages/home/home.component.ts index 0506730..b55764e 100644 --- a/src/app/website/pages/home/home.component.ts +++ b/src/app/website/pages/home/home.component.ts @@ -1,19 +1,15 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; +import { toSignal } from '@angular/core/rxjs-interop'; import { ResolveFn } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { filter, map } from 'rxjs/operators'; import { appRootTitle } from 'src/app/app.component'; -import { Language } from 'src/app/backoffice/tables/language/models/language.model'; -import { SkillType } from 'src/app/backoffice/tables/skill-type/models/skill-type.model'; import { skillTypeActions } from 'src/app/backoffice/tables/skill-type/state/skill-type.actions'; import { skillTypeReducer } from 'src/app/backoffice/tables/skill-type/state/skill-type.reducer'; -import { Skill } from 'src/app/backoffice/tables/skill/models/skill.model'; -import { skillActions } from 'src/app/backoffice/tables/skill/state/skill.actions'; -import { skillReducer } from 'src/app/backoffice/tables/skill/state/skill.reducer'; import { TranslationProvider } from 'src/app/shared/models/translation-provider.model'; import { ActionStatus, ActionType } from 'src/app/shared/state/common/common-state'; import { publicLanguageReducer } from 'src/app/shared/state/languages/public-language.reducer'; @@ -53,14 +49,23 @@ export class HomeComponent extends TranslationProvider implements OnInit, AfterV private store = inject(Store); private translateSrv = inject(TranslateService); - language$: Observable = this.store.select(publicLanguageReducer.getOne); - skills$: Observable = this.store.select(skillReducer.getAll); - loadingSkills$: Observable = this.store.select(skillReducer.getLoading); - skillTypes$: Observable = this.store.select(skillTypeReducer.getAll); + language$ = this.store.select(publicLanguageReducer.getOne); + language$$ = toSignal(this.language$); + + skillTypes$ = this.store.select(skillTypeReducer.getAll); + skillTypes$$ = toSignal(this.skillTypes$, { + initialValue: [], + }); + skillTypesActionStatus$: Observable = this.store.select(skillTypeReducer.getAction).pipe( filter((action) => !!action && action.type === ActionType.LOAD_MANY), + // eslint-disable-next-line @ngrx/avoid-mapping-selectors map((action) => (action ? action.status : ActionStatus.SUCCESS)), ); + skillTypesActionStatus$$ = toSignal(this.skillTypesActionStatus$, { + initialValue: ActionStatus.SUCCESS, + }); + socialNetworks: SocialNetwork[] = [ { name: 'GitHub', @@ -79,7 +84,7 @@ export class HomeComponent extends TranslationProvider implements OnInit, AfterV }, ]; - ngAfterViewInit(): void { + ngAfterViewInit() { this.store .select(publicLanguageReducer.getOne) .pipe(filter((i) => !!i)) @@ -88,13 +93,7 @@ export class HomeComponent extends TranslationProvider implements OnInit, AfterV }); } - ngOnInit(): void { - this.skills$.subscribe((skills) => { - if (!skills.length) { - this.store.dispatch(skillActions.loadAll({ payload: null })); - } - }); - + ngOnInit() { this.skillTypes$.subscribe((skillTypes) => { if (!skillTypes.length) { this.store.dispatch(skillTypeActions.loadAll({ payload: null })); @@ -102,14 +101,6 @@ export class HomeComponent extends TranslationProvider implements OnInit, AfterV }); } - getSkills(skillType: SkillType): Observable { - return this.skills$.pipe( - map((skills) => - skills.filter((skill) => skill.skillType.id === skillType.id).sort((a, b) => b.percentage - a.percentage), - ), - ); - } - get ActionStatus() { return ActionStatus; }