Make almost all components standalone

Author: dorthrithil

client/src/app/modules/archive/archive-button/archive-button.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { NgClass, NgIf } from '@angular/common';
-import { SharedModule } from 'primeng/api';
 import { Store } from '@ngrx/store';
 import { TranslocoDirective } from '@jsverse/transloco';
 import { toastNotification } from '../../../ngrx/actions/notifications.actions';
@@ -15,14 +14,7 @@ import { GymModeDirective } from '../../shared/directives/gym-mode.directive';
 
 @Component({
   selector: 'lc-archive-button',
-  imports: [
-    ButtonModule,
-    NgIf,
-    SharedModule,
-    NgClass,
-    TranslocoDirective,
-    GymModeDirective,
-  ],
+  imports: [ButtonModule, NgIf, NgClass, TranslocoDirective, GymModeDirective],
   templateUrl: './archive-button.component.html',
   styleUrl: './archive-button.component.scss',
   encapsulation: ViewEncapsulation.None,

client/src/app/modules/area/area-form/area-form.component.ts

@@ -6,12 +6,21 @@ import {
   ViewChildren,
 } from '@angular/core';
 import { FormDirective } from '../../shared/forms/form.directive';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import { LoadingState } from '../../../enums/loading-state';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SectorsService } from '../../../services/crud/sectors.service';
-import { TranslocoService } from '@jsverse/transloco';
+import {
+  TranslocoDirective,
+  TranslocoPipe,
+  TranslocoService,
+} from '@jsverse/transloco';
 import { ConfirmationService, SelectItem } from 'primeng/api';
 import { catchError, map } from 'rxjs/operators';
 import { forkJoin, of } from 'rxjs';
@@ -31,6 +40,20 @@ import {
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ScalesService } from '../../../services/crud/scales.service';
 import { LineType } from '../../../enums/line-type';
+import { Card } from 'primeng/card';
+import { NgIf } from '@angular/common';
+import { ControlGroupDirective } from '../../shared/forms/control-group.directive';
+import { InputText } from 'primeng/inputtext';
+import { FormControlDirective } from '../../shared/forms/form-control.directive';
+import { IfErrorDirective } from '../../shared/forms/if-error.directive';
+import { MapMarkerFormArrayComponent } from '../../maps/map-marker-form-array/map-marker-form-array.component';
+import { SingleImageUploadComponent } from '../../shared/forms/controls/single-image-upload/single-image-upload.component';
+import { Checkbox } from 'primeng/checkbox';
+import { Select } from 'primeng/select';
+import { Message } from 'primeng/message';
+import { Button } from 'primeng/button';
+import { ConfirmPopup } from 'primeng/confirmpopup';
+import { FormSkeletonComponent } from '../../shared/components/form-skeleton/form-skeleton.component';
 
 /**
  * Form component for creating and editing areas.
@@ -40,7 +63,27 @@ import { LineType } from '../../../enums/line-type';
   templateUrl: './area-form.component.html',
   styleUrls: ['./area-form.component.scss'],
   providers: [ConfirmationService],
-  standalone: false,
+  imports: [
+    TranslocoDirective,
+    Card,
+    NgIf,
+    ReactiveFormsModule,
+    FormDirective,
+    ControlGroupDirective,
+    InputText,
+    FormControlDirective,
+    IfErrorDirective,
+    Editor,
+    MapMarkerFormArrayComponent,
+    SingleImageUploadComponent,
+    Checkbox,
+    TranslocoPipe,
+    Select,
+    Message,
+    Button,
+    ConfirmPopup,
+    FormSkeletonComponent,
+  ],
 })
 @UntilDestroy()
 export class AreaFormComponent implements OnInit {

client/src/app/modules/area/area-info/area-info.component.ts

@@ -7,12 +7,29 @@ import { MapStyles } from '../../../enums/map-styles';
 import { MapMarkerType } from '../../../enums/map-marker-type';
 import { Coordinates } from '../../../interfaces/coordinates.interface';
 import { GradeDistribution } from '../../../models/scale';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { NgIf } from '@angular/common';
+import { ClosedSpotAlertComponent } from '../../shared/components/closed-spot-alert/closed-spot-alert.component';
+import { GradeDistributionBarChartComponent } from '../../shared/components/grade-distribution-bar-chart/grade-distribution-bar-chart.component';
+import { SanitizeHtmlPipe } from '../../shared/pipes/sanitize-html.pipe';
+import { CoordinatesButtonComponent } from '../../shared/components/coordinates-button/coordinates-button.component';
+import { MapComponent } from '../../maps/map/map.component';
+import { Skeleton } from 'primeng/skeleton';
 
 @Component({
   selector: 'lc-area-info',
   templateUrl: './area-info.component.html',
   styleUrls: ['./area-info.component.scss'],
-  standalone: false,
+  imports: [
+    TranslocoDirective,
+    NgIf,
+    ClosedSpotAlertComponent,
+    GradeDistributionBarChartComponent,
+    SanitizeHtmlPipe,
+    CoordinatesButtonComponent,
+    MapComponent,
+    Skeleton,
+  ],
 })
 export class AreaInfoComponent implements OnInit {
   public area: Area;

client/src/app/modules/area/area-list/area-list.component.ts

@@ -21,12 +21,12 @@ import { HasPermissionDirective } from '../../shared/directives/has-permission.d
 import { NgClass, NgForOf, NgIf } from '@angular/common';
 import { TopoDataviewSkeletonComponent } from '../../shared/components/topo-dataview-skeleton/topo-dataview-skeleton.component';
 import { ArchiveButtonComponent } from '../../archive/archive-button/archive-button.component';
-import { SharedModule } from '../../shared/shared.module';
 import { AscentCountComponent } from '../../ascent/ascent-count/ascent-count.component';
 import { ClosedSpotTagComponent } from '../../shared/components/closed-spot-tag/closed-spot-tag.component';
 import { SecretSpotTagComponent } from '../../shared/components/secret-spot-tag/secret-spot-tag.component';
 import { Message } from 'primeng/message';
 import { LeveledGradeDistributionComponent } from '../../shared/components/leveled-grade-distribution/leveled-grade-distribution.component';
+import { SanitizeHtmlPipe } from '../../shared/pipes/sanitize-html.pipe';
 
 /**
  * Component that lists all areas in a sector.
@@ -49,12 +49,12 @@ import { LeveledGradeDistributionComponent } from '../../shared/components/level
     NgForOf,
     NgClass,
     ArchiveButtonComponent,
-    SharedModule,
     AscentCountComponent,
     ClosedSpotTagComponent,
     SecretSpotTagComponent,
     Message,
     LeveledGradeDistributionComponent,
+    SanitizeHtmlPipe,
   ],
 })
 @UntilDestroy()

client/src/app/modules/area/area.module.ts

@@ -1,13 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
-import { AreaComponent } from './area/area.component';
-import { AreaFormComponent } from './area-form/area-form.component';
-import { AreaInfoComponent } from './area-info/area-info.component';
 import { DataViewModule } from 'primeng/dataview';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
-import { SharedModule } from '../shared/shared.module';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { CardModule } from 'primeng/card';
 import { InputTextModule } from 'primeng/inputtext';
@@ -40,12 +36,10 @@ import { Tab, TabList, Tabs } from 'primeng/tabs';
 import { TopoDataviewSkeletonComponent } from '../shared/components/topo-dataview-skeleton/topo-dataview-skeleton.component';
 
 @NgModule({
-  declarations: [AreaComponent, AreaFormComponent, AreaInfoComponent],
   imports: [
     CommonModule,
     CardModule,
     TranslocoModule,
-    SharedModule,
     InputTextModule,
     FormsModule,
     ReactiveFormsModule,

client/src/app/modules/area/area/area.component.ts

@@ -5,7 +5,12 @@ import { MenuItem } from 'primeng/api';
 import { CragsService } from '../../../services/crud/crags.service';
 import { SectorsService } from '../../../services/crud/sectors.service';
 import { TranslocoService } from '@jsverse/transloco';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  ActivatedRoute,
+  Router,
+  RouterLink,
+  RouterOutlet,
+} from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { Title } from '@angular/platform-browser';
 import { forkJoin, of } from 'rxjs';
@@ -17,12 +22,31 @@ import { Area } from '../../../models/area';
 import { AreasService } from '../../../services/crud/areas.service';
 import { selectInstanceSettingsState } from '../../../ngrx/selectors/instance-settings.selectors';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Card } from 'primeng/card';
+import { ClosedSpotTagComponent } from '../../shared/components/closed-spot-tag/closed-spot-tag.component';
+import { SecretSpotTagComponent } from '../../shared/components/secret-spot-tag/secret-spot-tag.component';
+import { NgIf } from '@angular/common';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { Tab, TabList, Tabs } from 'primeng/tabs';
+import { SetActiveTabDirective } from '../../shared/directives/set-active-tab.directive';
 
 @Component({
   selector: 'lc-area',
   templateUrl: './area.component.html',
   styleUrls: ['./area.component.scss'],
-  standalone: false,
+  imports: [
+    Card,
+    ClosedSpotTagComponent,
+    SecretSpotTagComponent,
+    NgIf,
+    Breadcrumb,
+    Tabs,
+    SetActiveTabDirective,
+    TabList,
+    Tab,
+    RouterLink,
+    RouterOutlet,
+  ],
 })
 @UntilDestroy()
 export class AreaComponent implements OnInit {

client/src/app/modules/ascent/ascent-form-title/ascent-form-title.component.ts

@@ -2,13 +2,13 @@ import { Component } from '@angular/core';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Line } from '../../../models/line';
 import { ScalesService } from '../../../services/crud/scales.service';
-import { SharedModule } from '../../shared/shared.module';
+import { LineGradePipe } from '../../shared/pipes/line-grade.pipe';
 
 @Component({
   selector: 'lc-ascent-form-title',
-  imports: [SharedModule],
   templateUrl: './ascent-form-title.component.html',
   styleUrl: './ascent-form-title.component.scss',
+  imports: [LineGradePipe],
 })
 export class AscentFormTitleComponent {
   public line: Line;

client/src/app/modules/ascent/ascent-form/ascent-form.component.ts

@@ -9,7 +9,6 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
-import { SharedModule } from '../../shared/shared.module';
 import { TranslocoDirective } from '@jsverse/transloco';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ButtonModule } from 'primeng/button';
@@ -35,14 +34,17 @@ import { ScalesService } from '../../../services/crud/scales.service';
 import { DatePickerModule } from 'primeng/datepicker';
 import { Select } from 'primeng/select';
 import { Textarea } from 'primeng/textarea';
+import { TranslateSpecialGradesPipe } from '../../shared/pipes/translate-special-grades.pipe';
+import { IfErrorDirective } from '../../shared/forms/if-error.directive';
+import { FormControlDirective } from '../../shared/forms/form-control.directive';
+import { ControlGroupDirective } from '../../shared/forms/control-group.directive';
 
 @Component({
   selector: 'lc-ascent-form',
   imports: [
     EditorModule,
     InputTextModule,
     ReactiveFormsModule,
-    SharedModule,
     CheckboxModule,
     ButtonModule,
     ConfirmPopupModule,
@@ -56,6 +58,11 @@ import { Textarea } from 'primeng/textarea';
     MessageModule,
     Select,
     Textarea,
+    TranslateSpecialGradesPipe,
+    IfErrorDirective,
+    FormControlDirective,
+    ControlGroupDirective,
+    FormDirective,
   ],
   templateUrl: './ascent-form.component.html',
   styleUrl: './ascent-form.component.scss',

client/src/app/modules/ascent/ascent-list/ascent-list.component.ts

@@ -15,7 +15,6 @@ import { Ascent } from '../../../models/ascent';
 import { ButtonModule } from 'primeng/button';
 import { DataViewModule } from 'primeng/dataview';
 import { HasPermissionDirective } from '../../shared/directives/has-permission.directive';
-import { SharedModule } from '../../shared/shared.module';
 import { LoadingState } from '../../../enums/loading-state';
 import { FormsModule } from '@angular/forms';
 import { ConfirmationService, MenuItem, SelectItem } from 'primeng/api';
@@ -49,6 +48,9 @@ import { RouterLink } from '@angular/router';
 import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import { AscentListSkeletonComponent } from '../ascent-list-skeleton/ascent-list-skeleton.component';
 import { Message } from 'primeng/message';
+import { DatePipe } from '../../shared/pipes/date.pipe';
+import { TranslateSpecialGradesPipe } from '../../shared/pipes/translate-special-grades.pipe';
+import { LineGradePipe } from '../../shared/pipes/line-grade.pipe';
 
 @Component({
   selector: 'lc-ascent-list',
@@ -61,7 +63,6 @@ import { Message } from 'primeng/message';
     DataViewModule,
     HasPermissionDirective,
     NgForOf,
-    SharedModule,
     FormsModule,
     NgClass,
     ConfirmPopupModule,
@@ -81,6 +82,9 @@ import { Message } from 'primeng/message';
     InfiniteScrollDirective,
     AscentListSkeletonComponent,
     Message,
+    DatePipe,
+    TranslateSpecialGradesPipe,
+    LineGradePipe,
   ],
   templateUrl: './ascent-list.component.html',
   styleUrl: './ascent-list.component.scss',

client/src/app/modules/ascent/ascents/ascents.component.ts

@@ -6,7 +6,6 @@ import { TranslocoDirective } from '@jsverse/transloco';
 
 @Component({
   selector: 'lc-ascents',
-  standalone: true,
   imports: [BreadcrumbModule, CardModule, RouterOutlet, TranslocoDirective],
   templateUrl: './ascents.component.html',
   styleUrl: './ascents.component.scss',

client/src/app/modules/ascent/pipes/consensus-grade.pipe.ts

@@ -3,7 +3,6 @@ import { Ascent } from '../../../models/ascent';
 
 @Pipe({
   name: 'consensusGrade',
-  standalone: true,
 })
 export class ConsensusGradePipe implements PipeTransform {
   transform(ascent: Ascent): boolean {

client/src/app/modules/ascent/pipes/downgrade.pipe.ts

@@ -3,7 +3,6 @@ import { Ascent } from '../../../models/ascent';
 
 @Pipe({
   name: 'downgrade',
-  standalone: true,
 })
 export class DowngradePipe implements PipeTransform {
   transform(ascent: Ascent): boolean {

client/src/app/modules/ascent/pipes/upgrade.pipe.ts

@@ -3,7 +3,6 @@ import { Ascent } from '../../../models/ascent';
 
 @Pipe({
   name: 'upgrade',
-  standalone: true,
 })
 export class UpgradePipe implements PipeTransform {
   transform(ascent: Ascent): boolean {

client/src/app/modules/ascent/project-climbed-form-title/project-climbed-form-title.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Line } from '../../../models/line';
-import { SharedModule } from '../../shared/shared.module';
 import { ScalesService } from '../../../services/crud/scales.service';
+import { LineGradePipe } from '../../shared/pipes/line-grade.pipe';
 
 @Component({
   selector: 'lc-project-climbed-form-title',
-  imports: [SharedModule],
   templateUrl: './project-climbed-form-title.component.html',
   styleUrl: './project-climbed-form-title.component.scss',
+  imports: [LineGradePipe],
 })
 export class ProjectClimbedFormTitleComponent {
   public line: Line;