NAS-131766: Refactor dashboard and other modules to standalone (#10854)

src/app/app.routing.ts

@@ -26,7 +26,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'system-tasks',
-        loadChildren: () => import('app/pages/system-tasks/system-tasks.module').then((module) => module.SystemTasksModule),
+        loadChildren: () => import('app/pages/system-tasks/system-tasks.routes').then((module) => module.systemTasksRoutes),
         data: { title: T('Others'), breadcrumb: T('Others') },
       },
     ],
@@ -39,7 +39,7 @@ export const rootRouterConfig: Routes = [
     children: [
       {
         path: 'dashboard',
-        loadChildren: () => import('app/pages/dashboard/dashboard.module').then((module) => module.DashboardModule),
+        loadComponent: () => import('app/pages/dashboard/components/dashboard/dashboard.component').then((module) => module.DashboardComponent),
         data: { title: T('Dashboard'), breadcrumb: T('Dashboard') },
       },
       {
@@ -94,7 +94,7 @@ export const rootRouterConfig: Routes = [
       },
       {
         path: 'reportsdashboard',
-        loadChildren: () => import('app/pages/reports-dashboard/reports-dashboard.module').then((module) => module.ReportsDashboardModule),
+        loadChildren: () => import('app/pages/reports-dashboard/reports-dashboard.routes').then((module) => module.reportsDashboardRoutes),
         data: { title: T('Reporting'), breadcrumb: T('Reporting') },
       },
       {

src/app/modules/buttons/oauth-button/components/oauth-button/oauth-button.component.spec.ts → src/app/modules/buttons/oauth-button/oauth-button.component.spec.ts

@@ -4,8 +4,8 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { mockWindow } from 'app/core/testing/utils/mock-window.utils';
 import { WINDOW } from 'app/helpers/window.helper';
-import { OauthButtonComponent } from 'app/modules/buttons/oauth-button/components/oauth-button/oauth-button.component';
 import { OauthButtonType } from 'app/modules/buttons/oauth-button/interfaces/oauth-button.interface';
+import { OauthButtonComponent } from 'app/modules/buttons/oauth-button/oauth-button.component';
 
 describe('OauthButtonComponent', () => {
   let spectator: Spectator<OauthButtonComponent>;

src/app/modules/buttons/oauth-button/components/oauth-button/oauth-button.component.ts → src/app/modules/buttons/oauth-button/oauth-button.component.ts

@@ -1,20 +1,28 @@
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnDestroy, output,
 } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { MatButton } from '@angular/material/button';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { WINDOW } from 'app/helpers/window.helper';
 import { GmailOauthConfig } from 'app/interfaces/mail-config.interface';
 import { OauthMessage } from 'app/interfaces/oauth-message.interface';
 import { OauthButtonType } from 'app/modules/buttons/oauth-button/interfaces/oauth-button.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { OauthJiraMessage } from 'app/modules/feedback/interfaces/file-ticket.interface';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { OauthProviderData } from 'app/pages/credentials/backup-credentials/cloud-credentials-form/oauth-provider/oauth-provider.component';
 
 @Component({
   selector: 'ix-oauth-button',
   templateUrl: './oauth-button.component.html',
   styleUrls: ['./oauth-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatButton,
+    TestDirective,
+    TranslateModule,
+  ],
 })
 export class OauthButtonComponent implements OnDestroy {
   @Input() oauthType: OauthButtonType;

src/app/modules/feedback/components/file-ticket/file-ticket.component.spec.ts

@@ -9,8 +9,8 @@ import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { fakeFile } from 'app/core/testing/utils/fake-file.uitls';
 import { mockCall, mockWebSocket } from 'app/core/testing/utils/mock-websocket.utils';
-import { OauthButtonComponent } from 'app/modules/buttons/oauth-button/components/oauth-button/oauth-button.component';
 import { OauthButtonType } from 'app/modules/buttons/oauth-button/interfaces/oauth-button.interface';
+import { OauthButtonComponent } from 'app/modules/buttons/oauth-button/oauth-button.component';
 import { FileTicketComponent } from 'app/modules/feedback/components/file-ticket/file-ticket.component';
 import { SimilarIssuesComponent } from 'app/modules/feedback/components/similar-issues/similar-issues.component';
 import { FeedbackType } from 'app/modules/feedback/interfaces/feedback.interface';

src/app/modules/feedback/components/file-ticket/file-ticket.component.ts

@@ -12,7 +12,7 @@ import { MiB } from 'app/constants/bytes.constant';
 import { TicketType, ticketAcceptedFiles } from 'app/enums/file-ticket.enum';
 import { helptextSystemSupport as helptext } from 'app/helptext/system/support';
 import { OauthButtonType } from 'app/modules/buttons/oauth-button/interfaces/oauth-button.interface';
-import { OauthButtonModule } from 'app/modules/buttons/oauth-button/oauth-button.module';
+import { OauthButtonComponent } from 'app/modules/buttons/oauth-button/oauth-button.component';
 import { FeedbackDialogComponent } from 'app/modules/feedback/components/feedback-dialog/feedback-dialog.component';
 import { SimilarIssuesComponent } from 'app/modules/feedback/components/similar-issues/similar-issues.component';
 import { FeedbackType } from 'app/modules/feedback/interfaces/feedback.interface';
@@ -44,7 +44,7 @@ import { WebSocketService } from 'app/services/ws.service';
     IxFileInputComponent,
     MatDialogActions,
     FormActionsComponent,
-    OauthButtonModule,
+    OauthButtonComponent,
     TranslateModule,
   ],
 })

src/app/modules/forms/ix-dynamic-form/ix-dynamic-form.module.ts

@@ -20,7 +20,7 @@ import { IxListItemComponent } from 'app/modules/forms/ix-forms/components/ix-li
 import { IxListComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.component';
 import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { CastPipe } from 'app/modules/pipes/cast/cast.pipe';
-import { SchedulerModule } from 'app/modules/scheduler/scheduler.module';
+import { SchedulerComponent } from 'app/modules/scheduler/components/scheduler/scheduler.component';
 import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 
 const components = [
@@ -36,7 +36,6 @@ const components = [
   imports: [
     TranslateModule,
     ReactiveFormsModule,
-    SchedulerModule,
     MatDividerModule,
     CastPipe,
     TooltipComponent,
@@ -52,6 +51,7 @@ const components = [
     IxIpInputWithNetmaskComponent,
     IxFieldsetComponent,
     AsyncPipe,
+    SchedulerComponent,
   ],
   exports: [
     ...components,

src/app/modules/layout/topbar/topbar.component.ts

@@ -36,7 +36,7 @@ import { topbarDialogPosition } from 'app/modules/layout/topbar/topbar-dialog-po
 import { toolBarElements } from 'app/modules/layout/topbar/topbar.elements';
 import { UserMenuComponent } from 'app/modules/layout/topbar/user-menu/user-menu.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
-import { TruecommandModule } from 'app/modules/truecommand/truecommand.module';
+import { TruecommandButtonComponent } from 'app/modules/truecommand/truecommand-button.component';
 import { SystemGeneralService } from 'app/services/system-general.service';
 import { ThemeService } from 'app/services/theme/theme.service';
 import { selectIsHaLicensed } from 'app/store/ha-info/ha-info.selectors';
@@ -59,7 +59,6 @@ import { alertIndicatorPressed, sidenavIndicatorPressed } from 'app/store/topbar
     GlobalSearchTriggerComponent,
     RouterLink,
     IxLogoComponent,
-    TruecommandModule,
     FailoverUpgradeIndicatorComponent,
     CheckinIndicatorComponent,
     ResilveringIndicatorComponent,
@@ -74,6 +73,7 @@ import { alertIndicatorPressed, sidenavIndicatorPressed } from 'app/store/topbar
     LetDirective,
     UiSearchDirective,
     TestDirective,
+    TruecommandButtonComponent,
   ],
 })
 export class TopbarComponent implements OnInit {

src/app/modules/scheduler/components/scheduler-modal/scheduler-date-examples/scheduler-date-examples.component.ts

@@ -1,7 +1,10 @@
+import { SlicePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, Component, computed, input,
 } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { slice } from 'lodash-es';
+import { IxDateComponent } from 'app/modules/pipes/ix-date/ix-date.component';
 import { CronSchedulePreview } from 'app/modules/scheduler/classes/cron-schedule-preview/cron-schedule-preview';
 import { LocaleService } from 'app/services/locale.service';
 
@@ -10,6 +13,12 @@ import { LocaleService } from 'app/services/locale.service';
   templateUrl: './scheduler-date-examples.component.html',
   styleUrls: ['./scheduler-date-examples.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxDateComponent,
+    TranslateModule,
+    SlicePipe,
+  ],
 })
 export class SchedulerDateExamplesComponent {
   readonly cronPreview = input.required<CronSchedulePreview>();

src/app/modules/scheduler/components/scheduler-modal/scheduler-modal.component.ts

@@ -1,17 +1,22 @@
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, Component, Inject, OnInit,
 } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormControl } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as cronParser from 'cron-parser';
 import { DayOfTheWeekRange, MonthRange } from 'cron-parser/types';
 import { of } from 'rxjs';
 import { helptextGlobal } from 'app/helptext/global-helptext';
 import { Option } from 'app/interfaces/option.interface';
+import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
+import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import {
   SchedulerModalConfig,
 } from 'app/modules/scheduler/components/scheduler-modal/scheduler-modal-config.interface';
@@ -20,15 +25,31 @@ import {
   CrontabPartValidatorService,
 } from 'app/modules/scheduler/services/crontab-part-validator.service';
 import { getDefaultCrontabPresets } from 'app/modules/scheduler/utils/get-default-crontab-presets.utils';
+import { TestDirective } from 'app/modules/test-id/test.directive';
+import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 import { AppState } from 'app/store';
 import { selectTimezone } from 'app/store/system-config/system-config.selectors';
+import { SchedulerPreviewColumnComponent } from './scheduler-preview-column/scheduler-preview-column.component';
 
 @UntilDestroy()
 @Component({
   selector: 'ix-scheduler-modal',
   templateUrl: './scheduler-modal.component.html',
   styleUrls: ['./scheduler-modal.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    IxSelectComponent,
+    TooltipComponent,
+    IxInputComponent,
+    MatCheckbox,
+    TestDirective,
+    MatButton,
+    SchedulerPreviewColumnComponent,
+    TranslateModule,
+    AsyncPipe,
+  ],
 })
 export class SchedulerModalComponent implements OnInit {
   protected form = this.formBuilder.group({

src/app/modules/scheduler/components/scheduler-modal/scheduler-preview-column/scheduler-preview-column.component.ts

@@ -6,21 +6,39 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
 import { MatCalendar, MatCalendarCellClassFunction } from '@angular/material/datepicker';
+import { MatDialogClose } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
 import {
   getDate, isBefore,
   startOfMonth, differenceInCalendarMonths,
 } from 'date-fns';
 import { utcToZonedTime } from 'date-fns-tz';
+import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { CronSchedulePreview } from 'app/modules/scheduler/classes/cron-schedule-preview/cron-schedule-preview';
+import { SchedulerDateExamplesComponent } from 'app/modules/scheduler/components/scheduler-modal/scheduler-date-examples/scheduler-date-examples.component';
+import { CrontabExplanationPipe } from 'app/modules/scheduler/pipes/crontab-explanation.pipe';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 
 @UntilDestroy()
 @Component({
   selector: 'ix-scheduler-preview-column',
   templateUrl: './scheduler-preview-column.component.html',
   styleUrls: ['./scheduler-preview-column.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconButton,
+    TestDirective,
+    MatDialogClose,
+    IxIconComponent,
+    MatCalendar,
+    SchedulerDateExamplesComponent,
+    TranslateModule,
+    CrontabExplanationPipe,
+  ],
 })
 export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
   @Input() crontab: string;

src/app/modules/scheduler/components/scheduler/scheduler.component.ts

@@ -1,26 +1,45 @@
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { MatOptionSelectionChange } from '@angular/material/core';
+import {
+  ControlValueAccessor, NgControl, ReactiveFormsModule, FormsModule,
+} from '@angular/forms';
+import { MatOptionSelectionChange, MatOption } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSelect } from '@angular/material/select';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { filter } from 'rxjs/operators';
+import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
+import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 import {
   SchedulerModalConfig,
 } from 'app/modules/scheduler/components/scheduler-modal/scheduler-modal-config.interface';
 import {
   SchedulerModalComponent,
 } from 'app/modules/scheduler/components/scheduler-modal/scheduler-modal.component';
+import { CrontabExplanationPipe } from 'app/modules/scheduler/pipes/crontab-explanation.pipe';
 import { CronPresetValue, getDefaultCrontabPresets } from 'app/modules/scheduler/utils/get-default-crontab-presets.utils';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 
 @UntilDestroy()
 @Component({
   selector: 'ix-scheduler',
   templateUrl: './scheduler.component.html',
   styleUrls: ['./scheduler.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxLabelComponent,
+    MatSelect,
+    ReactiveFormsModule,
+    TestDirective,
+    FormsModule,
+    MatOption,
+    IxErrorsComponent,
+    TranslateModule,
+    CrontabExplanationPipe,
+  ],
 })
 export class SchedulerComponent implements ControlValueAccessor {
   @Input() label: string;

src/app/modules/scheduler/pipes/crontab-explanation.pipe.ts

@@ -3,6 +3,7 @@ import cronstrue from 'cronstrue/i18n';
 
 @Pipe({
   name: 'crontabExplanation',
+  standalone: true,
 })
 export class CrontabExplanationPipe implements PipeTransform {
   transform(crontab: string): string {