UI: add import order rule to eslint (#2778)

* npm install -D eslint-import-resolver-typescript eslint-plugin-import
* add import rules
* fix: add ignore comment for eslint-plugin-import bug.
cf. import-js/eslint-plugin-import#1479
* eslint src/ --fix

ui/.eslintrc.json

@@ -20,18 +20,27 @@
         "createDefaultProgram": true
       },
       "plugins": [
+        "import",
         "unused-imports",
         "@stylistic"
       ],
       "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:import/recommended"
       ],
       "rules": {
         "curly": "error",
         "unused-imports/no-unused-imports": "error",
+        "import/order": [
+          "error",
+          {
+            "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+            "alphabetize": { "order": "asc", "caseInsensitive": true }
+          }
+        ],
         "@typescript-eslint/explicit-member-accessibility": [
           "error",
           {
@@ -100,6 +109,11 @@
             "allowDefaultCaseForExhaustiveSwitch": false
           }
         ]
+      },
+      "settings": {
+        "import/resolver": {
+          "typescript": {}
+        }
       }
     },
     {

ui/package.json

@@ -80,7 +80,8 @@
     "@typescript-eslint/parser": "^7.0.0",
     "@typescript-eslint/types": "^8.7.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-import": "2.30.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsdoc": "50.2.4",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-unused-imports": "^4.1.4",

ui/src/app/app.service.ts

@@ -3,8 +3,8 @@ import { Injectable } from "@angular/core";
 import { App } from "@capacitor/app";
 import { Capacitor } from "@capacitor/core";
 import { Directory, Encoding, Filesystem } from "@capacitor/filesystem";
-import { FileOpener } from "@ionic-native/file-opener";
 import { AlertController } from "@ionic/angular";
+import { FileOpener } from "@ionic-native/file-opener";
 import { TranslateService } from "@ngx-translate/core";
 import { saveAs } from "file-saver-es";
 import { DeviceDetectorService, DeviceInfo } from "ngx-device-detector";

ui/src/app/edge/history/Controller/Io/DigitalOutput/digitalOutput.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
+import { FooterNavigationModule } from "src/app/shared/components/footer/subnavigation/footerNavigation.module";
 import { SharedModule } from "src/app/shared/shared.module";
 import { TotalChartComponent } from "./chart/chart";
-import { FlatComponent } from "./flat/flat";
-import { OverviewComponent } from "./overview/overview";
 import { ChartComponent } from "./details/chart/chart";
 import { DetailsOverviewComponent } from "./details/details.overview";
-import { FooterNavigationModule } from "src/app/shared/components/footer/subnavigation/footerNavigation.module";
+import { FlatComponent } from "./flat/flat";
+import { OverviewComponent } from "./overview/overview";
 
 @NgModule({
     imports: [

ui/src/app/edge/history/Controller/ModbusTcpApi/modbusTcpApi.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { SharedModule } from "src/app/shared/shared.module";
+import { ChartComponent } from "./chart/chart";
 import { FlatComponent } from "./flat/flat";
 import { OverviewComponent } from "./overview/overview";
-import { ChartComponent } from "./chart/chart";
 
 @NgModule({
     imports: [

ui/src/app/edge/history/Controller/controller.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
-import { ControllerEss } from "./Ess/ess.module";
-import { ControllerIo } from "./Io/Io.module";
 import { ChannelThreshold } from "./ChannelThreshold/channelThreshold.module";
+import { ControllerEss } from "./Ess/ess.module";
 import { GridOptimizeCharge } from "./Ess/GridoptimizedCharge/gridOptimizeCharge.module";
 import { TimeOfUseTariff } from "./Ess/TimeOfUseTariff/timeOfUseTariff.module";
+import { ControllerIo } from "./Io/Io.module";
 import { ModbusTcpApi } from "./ModbusTcpApi/modbusTcpApi.module";
 
 @NgModule({

ui/src/app/edge/history/common/consumption/Consumption.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
+import { CurrentVoltageModule } from "src/app/shared/components/edge/meter/currentVoltage/currentVoltageModule";
 import { FooterNavigationModule } from "src/app/shared/components/footer/subnavigation/footerNavigation.module";
 import { SharedModule } from "src/app/shared/shared.module";
 
-import { CurrentVoltageModule } from "src/app/shared/components/edge/meter/currentVoltage/currentVoltageModule";
 import { ChartComponent } from "./chart/chart";
 import { ConsumptionMeterChartDetailsComponent } from "./details/chart/consumptionMeter";
 import { EvcsChartDetailsComponent } from "./details/chart/evcs";

ui/src/app/edge/history/common/production/production.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
+import { CurrentVoltageModule } from "src/app/shared/components/edge/meter/currentVoltage/currentVoltageModule";
 import { FooterNavigationModule } from "src/app/shared/components/footer/subnavigation/footerNavigation.module";
 import { SharedModule } from "src/app/shared/shared.module";
 
-import { CurrentVoltageModule } from "src/app/shared/components/edge/meter/currentVoltage/currentVoltageModule";
 import { TotalChartComponent } from "./chart/totalChart";
 import { ChargerChartDetailsComponent } from "./details/chart/charger";
 import { ProductionMeterChartDetailsComponent } from "./details/chart/productionMeter";

ui/src/app/edge/history/shared.ts

@@ -1,7 +1,10 @@
 // @ts-strict-ignore
 import * as Chart from "chart.js";
+/* eslint-disable import/no-duplicates */
+// cf. https://github.com/import-js/eslint-plugin-import/issues/1479
 import { differenceInDays, differenceInMinutes, startOfDay } from "date-fns";
 import { de } from "date-fns/locale";
+/* eslint-enable import/no-duplicates */
 import { QueryHistoricTimeseriesDataResponse } from "src/app/shared/jsonrpc/response/queryHistoricTimeseriesDataResponse";
 import { ChannelAddress, Service } from "src/app/shared/shared";
 import { DateUtils } from "src/app/shared/utils/date/dateutils";

ui/src/app/edge/history/storage/totalchart.component.ts

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { formatNumber } from "@angular/common";
 import { Component, Input, OnChanges, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
@@ -7,7 +8,6 @@ import { DefaultTypes } from "src/app/shared/service/defaulttypes";
 import { ChartAxis, Utils, YAxisType } from "src/app/shared/service/utils";
 import { ChannelAddress, Edge, EdgeConfig, Service } from "src/app/shared/shared";
 
-import { formatNumber } from "@angular/common";
 import { AbstractHistoryChart } from "../abstracthistorychart";
 
 @Component({

ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts

@@ -4,13 +4,13 @@ import { ActivatedRoute } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
 import * as Chart from "chart.js";
 import { AbstractHistoryChart } from "src/app/edge/history/abstracthistorychart";
+import { calculateResolution } from "src/app/edge/history/shared";
 import { AbstractHistoryChart as NewAbstractHistoryChart } from "src/app/shared/components/chart/abstracthistorychart";
+import { ChartConstants } from "src/app/shared/components/chart/chart.constants";
 import { ComponentJsonApiRequest } from "src/app/shared/jsonrpc/request/componentJsonApiRequest";
 import { ChartAxis, HistoryUtils, TimeOfUseTariffUtils, YAxisType } from "src/app/shared/service/utils";
 import { ChannelAddress, Currency, Edge, EdgeConfig, Service, Websocket } from "src/app/shared/shared";
 
-import { calculateResolution } from "src/app/edge/history/shared";
-import { ChartConstants } from "src/app/shared/components/chart/chart.constants";
 import { ColorUtils } from "src/app/shared/utils/color/color.utils";
 import { GetScheduleRequest } from "../../../../../../shared/jsonrpc/request/getScheduleRequest";
 import { GetScheduleResponse } from "../../../../../../shared/jsonrpc/response/getScheduleResponse";

ui/src/app/edge/live/common/storage/storage.component.ts

@@ -2,10 +2,9 @@
 import { formatNumber } from "@angular/common";
 import { Component } from "@angular/core";
 import { AbstractFlatWidget } from "src/app/shared/components/flat/abstract-flat-widget";
-import { CurrentData } from "src/app/shared/shared";
+import { CurrentData , ChannelAddress, EdgeConfig, Utils } from "src/app/shared/shared";
 import { DateUtils } from "src/app/shared/utils/date/dateutils";
 
-import { ChannelAddress, EdgeConfig, Utils } from "../../../../shared/shared";
 import { StorageModalComponent } from "./modal/modal.component";
 
 @Component({

ui/src/app/edge/live/live.module.ts

@@ -2,14 +2,21 @@ import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { SharedModule } from "./../../shared/shared.module";
+import { Common_Autarchy } from "./common/autarchy/Common_Autarchy";
+import { Common_Consumption } from "./common/consumption/Common_Consumption";
+import { Common_Grid } from "./common/grid/Common_Grid";
+import { Common_Production } from "./common/production/Common_Production";
+import { Common_Selfconsumption } from "./common/selfconsumption/Common_Selfconsumption";
+import { StorageModalComponent } from "./common/storage/modal/modal.component";
+import { StorageComponent } from "./common/storage/storage.component";
 import { Controller_ChannelthresholdComponent } from "./Controller/Channelthreshold/Channelthreshold";
 import { Controller_ChpSocComponent } from "./Controller/ChpSoc/ChpSoc";
 import { Controller_ChpSocModalComponent } from "./Controller/ChpSoc/modal/modal.component";
 import { Controller_Ess_FixActivePower } from "./Controller/Ess/FixActivePower/Ess_FixActivePower";
 import { Controller_Ess_GridOptimizedCharge } from "./Controller/Ess/GridOptimizedCharge/Ess_GridOptimizedCharge";
 import { Controller_Ess_TimeOfUseTariff } from "./Controller/Ess/TimeOfUseTariff/Ess_TimeOfUseTariff";
-import { Controller_Evcs } from "./Controller/Evcs/Evcs";
 import { AdministrationComponent } from "./Controller/Evcs/administration/administration.component";
+import { Controller_Evcs } from "./Controller/Evcs/Evcs";
 import { Controller_Io_ChannelSingleThresholdComponent } from "./Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold";
 import { Controller_Io_ChannelSingleThresholdModalComponent } from "./Controller/Io/ChannelSingleThreshold/modal/modal.component";
 import { Controller_Io_FixDigitalOutputComponent } from "./Controller/Io/FixDigitalOutput/Io_FixDigitalOutput";
@@ -20,27 +27,20 @@ import { Controller_Io_HeatpumpModalComponent } from "./Controller/Io/Heatpump/m
 import { Controller_Api_ModbusTcp } from "./Controller/ModbusTcpApi/modbusTcpApi.module";
 import { Controller_Asymmetric_PeakShavingComponent } from "./Controller/PeakShaving/Asymmetric/Asymmetric";
 import { Controller_Asymmetric_PeakShavingModalComponent } from "./Controller/PeakShaving/Asymmetric/modal/modal.component";
-import { Controller_Symmetric_PeakShavingComponent } from "./Controller/PeakShaving/Symmetric/Symmetric";
 import { Controller_Symmetric_PeakShavingModalComponent } from "./Controller/PeakShaving/Symmetric/modal/modal.component";
-import { Controller_Symmetric_TimeSlot_PeakShavingComponent } from "./Controller/PeakShaving/Symmetric_TimeSlot/Symmetric_TimeSlot";
+import { Controller_Symmetric_PeakShavingComponent } from "./Controller/PeakShaving/Symmetric/Symmetric";
 import { Controller_Symmetric_TimeSlot_PeakShavingModalComponent } from "./Controller/PeakShaving/Symmetric_TimeSlot/modal/modal.component";
-import { Io_Api_DigitalInputComponent } from "./Io/Api_DigitalInput/Io_Api_DigitalInput";
-import { Io_Api_DigitalInput_ModalComponent } from "./Io/Api_DigitalInput/modal/modal.component";
-import { Evcs_Api_ClusterComponent } from "./Multiple/Evcs_Api_Cluster/Evcs_Api_Cluster";
-import { EvcsChartComponent } from "./Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart";
-import { Evcs_Api_ClusterModalComponent } from "./Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page";
-import { Common_Autarchy } from "./common/autarchy/Common_Autarchy";
-import { Common_Consumption } from "./common/consumption/Common_Consumption";
-import { Common_Grid } from "./common/grid/Common_Grid";
-import { Common_Production } from "./common/production/Common_Production";
-import { Common_Selfconsumption } from "./common/selfconsumption/Common_Selfconsumption";
-import { StorageModalComponent } from "./common/storage/modal/modal.component";
-import { StorageComponent } from "./common/storage/storage.component";
+import { Controller_Symmetric_TimeSlot_PeakShavingComponent } from "./Controller/PeakShaving/Symmetric_TimeSlot/Symmetric_TimeSlot";
 import { DelayedSellToGridComponent } from "./delayedselltogrid/delayedselltogrid.component";
 import { DelayedSellToGridModalComponent } from "./delayedselltogrid/modal/modal.component";
 import { EnergymonitorModule } from "./energymonitor/energymonitor.module";
 import { InfoComponent } from "./info/info.component";
+import { Io_Api_DigitalInputComponent } from "./Io/Api_DigitalInput/Io_Api_DigitalInput";
+import { Io_Api_DigitalInput_ModalComponent } from "./Io/Api_DigitalInput/modal/modal.component";
 import { LiveComponent } from "./live.component";
+import { Evcs_Api_ClusterComponent } from "./Multiple/Evcs_Api_Cluster/Evcs_Api_Cluster";
+import { EvcsChartComponent } from "./Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart";
+import { Evcs_Api_ClusterModalComponent } from "./Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page";
 import { OfflineComponent } from "./offline/offline.component";
 
 @NgModule({

ui/src/app/edge/settings/channels/channels.component.ts

@@ -3,12 +3,12 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
 import { PersistencePriority } from "src/app/shared/components/edge/edgeconfig";
-import { SetChannelValueRequest } from "src/app/shared/jsonrpc/request/setChannelValueRequest";
-import { environment } from "src/environments";
 
 import { ComponentJsonApiRequest } from "src/app/shared/jsonrpc/request/componentJsonApiRequest";
 import { GetChannelsOfComponentRequest } from "src/app/shared/jsonrpc/request/getChannelsOfComponentRequest";
+import { SetChannelValueRequest } from "src/app/shared/jsonrpc/request/setChannelValueRequest";
 import { Channel, GetChannelsOfComponentResponse } from "src/app/shared/jsonrpc/response/getChannelsOfComponentResponse";
+import { environment } from "src/environments";
 import { ChannelAddress, Edge, EdgeConfig, EdgePermission, Service, Websocket } from "../../../shared/shared";
 
 @Component({

ui/src/app/index/login.component.ts

@@ -2,10 +2,10 @@
 import { AfterContentChecked, ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
 import { FormGroup } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
+import { Capacitor } from "@capacitor/core";
 import { Subject } from "rxjs";
 import { environment } from "src/environments";
 
-import { Capacitor } from "@capacitor/core";
 import { AppService } from "../app.service";
 import { AuthenticateWithPasswordRequest } from "../shared/jsonrpc/request/authenticateWithPasswordRequest";
 import { States } from "../shared/ngrx-store/states";

ui/src/app/shared/components/abstracthistorywidget.ts

@@ -4,9 +4,9 @@ import { ActivatedRoute } from "@angular/router";
 import { ModalController } from "@ionic/angular";
 import { TranslateService } from "@ngx-translate/core";
 import { Subject } from "rxjs";
+import { v4 as uuidv4 } from "uuid";
 import { DefaultTypes } from "src/app/shared/service/defaulttypes";
 import { ChannelAddress, CurrentData, Edge, EdgeConfig, Service, Websocket } from "src/app/shared/shared";
-import { v4 as uuidv4 } from "uuid";
 
 // NOTE: Auto-refresh of widgets is currently disabled to reduce server load
 @Directive()