From 7e32eb4acb15f839894f1d958f7a1e560615f539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Pedersen?= Date: Thu, 24 Aug 2023 09:27:16 +0200 Subject: [PATCH] switch angular/flex-lyaout to ngy-layout ngy-layout is a replacement clone for the discontinued flex-layout. See https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127 and https://github.com/angular/flex-layout/issues/1426#issuecomment-1589953005 Change-Id: Id6f743428d52e8e34ecbddcc3d7b28c1345a3a90 --- package-lock.json | 16 ++++++++++++++++ package.json | 5 +++-- src/app/about/about.module.ts | 2 +- src/app/datasets/datasets.module.ts | 2 +- src/app/files/files.module.ts | 2 +- .../instrument-details.component.spec.ts | 2 +- .../instruments-dashboard.component.spec.ts | 2 +- src/app/instruments/instruments.module.ts | 2 +- .../jobs-dashboard.component.spec.ts | 2 +- src/app/jobs/jobs.module.ts | 2 +- src/app/logbooks/logbooks.module.ts | 2 +- .../policies-dashboard.component.spec.ts | 2 +- src/app/policies/policies.module.ts | 2 +- src/app/proposals/proposals.module.ts | 2 +- .../publisheddata-dashboard.component.spec.ts | 2 +- .../publisheddata-edit.component.spec.ts | 2 +- src/app/publisheddata/publisheddata.module.ts | 2 +- .../sample-dashboard.component.spec.ts | 2 +- .../sample-detail.component.spec.ts | 2 +- src/app/samples/samples.module.ts | 2 +- .../scientific-metadata-tree.modules.ts | 2 +- .../scientific-metadata.module.ts | 2 +- .../modules/shared-table/shared-table.module.ts | 2 +- .../user-settings.component.spec.ts | 2 +- src/app/users/users.module.ts | 2 +- 25 files changed, 42 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7454ea1d9..ad00179dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@angular/platform-server": "^16", "@angular/router": "^16", "@angular/service-worker": "^16", + "@ngbracket/ngx-layout": "^16.0.0", "@ngrx/effects": "^16", "@ngrx/router-store": "^16", "@ngrx/store": "^16", @@ -4682,6 +4683,21 @@ "tslib": "^2.1.0" } }, + "node_modules/@ngbracket/ngx-layout": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@ngbracket/ngx-layout/-/ngx-layout-16.0.0.tgz", + "integrity": "sha512-tfN7M4LdquU8kWp7ejW+oQaydE/yaqBxmqfXq2FIVtWPcPvreahRjDyeQCZrGx0CQb7YojH1pPZ9QknuyZe1bg==", + "dependencies": { + "tslib": "^2.5.0" + }, + "peerDependencies": { + "@angular/cdk": ">=16.0.0", + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0", + "@angular/platform-browser": ">=16.0.0", + "rxjs": "^6.5.3 || ^7.8.0" + } + }, "node_modules/@ngrx/effects": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-16.2.0.tgz", diff --git a/package.json b/package.json index c314041e1..e3789ebda 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "private": true, "dependencies": { + "@angular-material-components/datetime-picker": "^16", "@angular/animations": "^16", "@angular/cdk": "^16", "@angular/common": "^16", @@ -29,7 +30,7 @@ "@angular/platform-server": "^16", "@angular/router": "^16", "@angular/service-worker": "^16", - "@angular-material-components/datetime-picker": "^16", + "@ngbracket/ngx-layout": "^16.0.0", "@ngrx/effects": "^16", "@ngrx/router-store": "^16", "@ngrx/store": "^16", @@ -50,8 +51,8 @@ "zone.js": "^0.13" }, "devDependencies": { + "@angular-devkit/build-angular": "^16", "@angular-devkit/core": "^16", - "@angular-devkit/build-angular":"^16", "@angular-eslint/builder": "^16", "@angular-eslint/eslint-plugin": "^16", "@angular-eslint/eslint-plugin-template": "^16", diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts index 4d64d81f5..34c2421d8 100644 --- a/src/app/about/about.module.ts +++ b/src/app/about/about.module.ts @@ -2,7 +2,7 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { AboutComponent } from "./about/about.component"; import { MatCardModule } from "@angular/material/card"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { LinkyModule } from "ngx-linky"; @NgModule({ diff --git a/src/app/datasets/datasets.module.ts b/src/app/datasets/datasets.module.ts index 74d3c78a4..a07f44b0e 100644 --- a/src/app/datasets/datasets.module.ts +++ b/src/app/datasets/datasets.module.ts @@ -4,7 +4,7 @@ import { LinkyModule } from "ngx-linky"; import { ArchivingService } from "./archiving.service"; import { BatchViewComponent } from "./batch-view/batch-view.component"; import { AsyncPipe, CommonModule } from "@angular/common"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; import { MatChipsModule } from "@angular/material/chips"; diff --git a/src/app/files/files.module.ts b/src/app/files/files.module.ts index fde6ac783..3e6be5ec2 100644 --- a/src/app/files/files.module.ts +++ b/src/app/files/files.module.ts @@ -3,7 +3,7 @@ import { CommonModule } from "@angular/common"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { SharedScicatFrontendModule } from "shared/shared.module"; import { FilesDashboardComponent } from "./files-dashboard/files-dashboard.component"; diff --git a/src/app/instruments/instrument-details/instrument-details.component.spec.ts b/src/app/instruments/instrument-details/instrument-details.component.spec.ts index 4e2aebb48..0831dfe2d 100644 --- a/src/app/instruments/instrument-details/instrument-details.component.spec.ts +++ b/src/app/instruments/instrument-details/instrument-details.component.spec.ts @@ -16,7 +16,7 @@ import { saveCustomMetadataAction } from "state-management/actions/instruments.a import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; import { MatTabsModule } from "@angular/material/tabs"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { AppConfigService } from "app-config.service"; const getConfig = () => ({ diff --git a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts index d0ab8953c..bdd8b19bc 100644 --- a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts +++ b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts @@ -23,7 +23,7 @@ import { } from "state-management/actions/instruments.actions"; import { Router } from "@angular/router"; import { Instrument } from "shared/sdk"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; describe("InstrumentsDashboardComponent", () => { let component: InstrumentsDashboardComponent; diff --git a/src/app/instruments/instruments.module.ts b/src/app/instruments/instruments.module.ts index 64d777492..8cb0d9f43 100644 --- a/src/app/instruments/instruments.module.ts +++ b/src/app/instruments/instruments.module.ts @@ -1,7 +1,7 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { InstrumentsDashboardComponent } from "./instruments-dashboard/instruments-dashboard.component"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { StoreModule } from "@ngrx/store"; import { instrumentsReducer } from "state-management/reducers/instruments.reducer"; import { EffectsModule } from "@ngrx/effects"; diff --git a/src/app/jobs/jobs-dashboard/jobs-dashboard.component.spec.ts b/src/app/jobs/jobs-dashboard/jobs-dashboard.component.spec.ts index ddcfbddab..f4b235395 100644 --- a/src/app/jobs/jobs-dashboard/jobs-dashboard.component.spec.ts +++ b/src/app/jobs/jobs-dashboard/jobs-dashboard.component.spec.ts @@ -20,7 +20,7 @@ import { } from "state-management/actions/jobs.actions"; import { PageChangeEvent } from "shared/modules/table/table.component"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; diff --git a/src/app/jobs/jobs.module.ts b/src/app/jobs/jobs.module.ts index dc910cec7..1f781b115 100644 --- a/src/app/jobs/jobs.module.ts +++ b/src/app/jobs/jobs.module.ts @@ -9,7 +9,7 @@ import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; import { StoreModule } from "@ngrx/store"; import { jobsReducer } from "state-management/reducers/jobs.reducer"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { SharedScicatFrontendModule } from "shared/shared.module"; import { JobsDashboardNewComponent } from "./jobs-dashboard-new/jobs-dashboard-new.component"; diff --git a/src/app/logbooks/logbooks.module.ts b/src/app/logbooks/logbooks.module.ts index f291c0ff3..f6eb3f435 100644 --- a/src/app/logbooks/logbooks.module.ts +++ b/src/app/logbooks/logbooks.module.ts @@ -10,7 +10,7 @@ import { MatIconModule } from "@angular/material/icon"; import { MatPaginatorModule } from "@angular/material/paginator"; import { MatSortModule } from "@angular/material/sort"; import { MatTableModule } from "@angular/material/table"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { LinkyModule } from "ngx-linky"; import { RouterModule } from "@angular/router"; import { SharedScicatFrontendModule } from "shared/shared.module"; diff --git a/src/app/policies/policies-dashboard/policies-dashboard.component.spec.ts b/src/app/policies/policies-dashboard/policies-dashboard.component.spec.ts index 6bc4ad47c..be1e706f3 100644 --- a/src/app/policies/policies-dashboard/policies-dashboard.component.spec.ts +++ b/src/app/policies/policies-dashboard/policies-dashboard.component.spec.ts @@ -42,7 +42,7 @@ import { import { MatCheckboxChange } from "@angular/material/checkbox"; import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from "@angular/material/icon"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; describe("PoliciesDashboardComponent", () => { diff --git a/src/app/policies/policies.module.ts b/src/app/policies/policies.module.ts index 08c170c27..155713367 100644 --- a/src/app/policies/policies.module.ts +++ b/src/app/policies/policies.module.ts @@ -26,7 +26,7 @@ import { SharedScicatFrontendModule } from "shared/shared.module"; import { StoreModule } from "@ngrx/store"; import { policiesReducer } from "state-management/reducers/policies.reducer"; import { PoliciesDashboardComponent } from "./policies-dashboard/policies-dashboard.component"; -import { FlexModule } from "@angular/flex-layout"; +import { FlexModule } from "@ngbracket/ngx-layout"; @NgModule({ imports: [ diff --git a/src/app/proposals/proposals.module.ts b/src/app/proposals/proposals.module.ts index fa672cbcd..07046958b 100644 --- a/src/app/proposals/proposals.module.ts +++ b/src/app/proposals/proposals.module.ts @@ -25,7 +25,7 @@ import { MatTableModule } from "@angular/material/table"; import { MatTabsModule } from "@angular/material/tabs"; import { MatTooltipModule } from "@angular/material/tooltip"; import { SharedScicatFrontendModule } from "shared/shared.module"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { FileSizePipe } from "shared/pipes/filesize.pipe"; import { ProposalFilterComponent } from "./proposal-filter/proposal-filter.component"; import { LogbooksModule } from "logbooks/logbooks.module"; diff --git a/src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.spec.ts b/src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.spec.ts index b43d36c15..aef0a4362 100644 --- a/src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.spec.ts +++ b/src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.spec.ts @@ -16,7 +16,7 @@ import { MatCheckboxChange } from "@angular/material/checkbox"; import { of } from "rxjs"; import { Message, MessageType } from "state-management/models"; import { showMessageAction } from "state-management/actions/user.actions"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from "@angular/material/icon"; import { AppConfigService } from "app-config.service"; diff --git a/src/app/publisheddata/publisheddata-edit/publisheddata-edit.component.spec.ts b/src/app/publisheddata/publisheddata-edit/publisheddata-edit.component.spec.ts index 010268421..31a465bea 100644 --- a/src/app/publisheddata/publisheddata-edit/publisheddata-edit.component.spec.ts +++ b/src/app/publisheddata/publisheddata-edit/publisheddata-edit.component.spec.ts @@ -24,7 +24,7 @@ import { MatInputModule } from "@angular/material/input"; import { MatSelectModule } from "@angular/material/select"; import { MatOptionModule } from "@angular/material/core"; import { MatButtonModule } from "@angular/material/button"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; describe("PublisheddataEditComponent", () => { let component: PublisheddataEditComponent; diff --git a/src/app/publisheddata/publisheddata.module.ts b/src/app/publisheddata/publisheddata.module.ts index 508bcb0ce..1f0265867 100644 --- a/src/app/publisheddata/publisheddata.module.ts +++ b/src/app/publisheddata/publisheddata.module.ts @@ -14,7 +14,7 @@ import { StoreModule } from "@ngrx/store"; import { publishedDataReducer } from "state-management/reducers/published-data.reducer"; import { PublisheddataDashboardComponent } from "./publisheddata-dashboard/publisheddata-dashboard.component"; import { PublisheddataEditComponent } from "./publisheddata-edit/publisheddata-edit.component"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { MatFormFieldModule } from "@angular/material/form-field"; import { MatChipsModule } from "@angular/material/chips"; diff --git a/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts b/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts index 7b3f6b15a..57d3d45ae 100644 --- a/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts +++ b/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts @@ -24,7 +24,7 @@ import { SampleDialogComponent } from "samples/sample-dialog/sample-dialog.compo import { MatCardModule } from "@angular/material/card"; import { MatDialogModule } from "@angular/material/dialog"; import { MatTableModule } from "@angular/material/table"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from "@angular/material/icon"; import { MatChipsModule } from "@angular/material/chips"; diff --git a/src/app/samples/sample-detail/sample-detail.component.spec.ts b/src/app/samples/sample-detail/sample-detail.component.spec.ts index b0e9883e9..a12178f35 100644 --- a/src/app/samples/sample-detail/sample-detail.component.spec.ts +++ b/src/app/samples/sample-detail/sample-detail.component.spec.ts @@ -29,7 +29,7 @@ import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; import { MatTabsModule } from "@angular/material/tabs"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { AppConfigService } from "app-config.service"; const getConfig = () => ({ diff --git a/src/app/samples/samples.module.ts b/src/app/samples/samples.module.ts index ea732d5a6..e0f399354 100644 --- a/src/app/samples/samples.module.ts +++ b/src/app/samples/samples.module.ts @@ -16,7 +16,7 @@ import { samplesReducer } from "../state-management/reducers/samples.reducer"; import { SampleDialogComponent } from "./sample-dialog/sample-dialog.component"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { SampleDashboardComponent } from "./sample-dashboard/sample-dashboard.component"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { NgxJsonViewerModule } from "ngx-json-viewer"; import { SharedScicatFrontendModule } from "shared/shared.module"; import { MatChipsModule } from "@angular/material/chips"; diff --git a/src/app/shared/modules/scientific-metadata-tree/scientific-metadata-tree.modules.ts b/src/app/shared/modules/scientific-metadata-tree/scientific-metadata-tree.modules.ts index bbfea42cd..9bdd4fb0d 100644 --- a/src/app/shared/modules/scientific-metadata-tree/scientific-metadata-tree.modules.ts +++ b/src/app/shared/modules/scientific-metadata-tree/scientific-metadata-tree.modules.ts @@ -10,7 +10,7 @@ import { MatAutocompleteModule } from "@angular/material/autocomplete"; import { CommonModule, DatePipe } from "@angular/common"; import { MatInputModule } from "@angular/material/input"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { FlexLayoutModule, FlexModule } from "@angular/flex-layout"; +import { FlexLayoutModule, FlexModule } from "@ngbracket/ngx-layout"; import { MatDividerModule } from "@angular/material/divider"; import { TreeViewComponent } from "./tree-view/tree-view.component"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; diff --git a/src/app/shared/modules/scientific-metadata/scientific-metadata.module.ts b/src/app/shared/modules/scientific-metadata/scientific-metadata.module.ts index b73eef035..667296f83 100644 --- a/src/app/shared/modules/scientific-metadata/scientific-metadata.module.ts +++ b/src/app/shared/modules/scientific-metadata/scientific-metadata.module.ts @@ -13,7 +13,7 @@ import { MetadataViewComponent } from "./metadata-view/metadata-view.component"; import { MetadataEditComponent } from "./metadata-edit/metadata-edit.component"; import { PipesModule } from "shared/pipes/pipes.module"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { FlexModule } from "@angular/flex-layout"; +import { FlexModule } from "@ngbracket/ngx-layout"; @NgModule({ declarations: [MetadataViewComponent, MetadataEditComponent], diff --git a/src/app/shared/modules/shared-table/shared-table.module.ts b/src/app/shared/modules/shared-table/shared-table.module.ts index b65fbb7a3..7879c6bf1 100644 --- a/src/app/shared/modules/shared-table/shared-table.module.ts +++ b/src/app/shared/modules/shared-table/shared-table.module.ts @@ -25,7 +25,7 @@ import { MatToolbarModule } from "@angular/material/toolbar"; import { MatFormFieldModule } from "@angular/material/form-field"; import { MatInputModule } from "@angular/material/input"; import { MatButtonModule } from "@angular/material/button"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { ObjKeysPipe } from "shared/pipes/obj-keys.pipe"; import { RouterModule } from "@angular/router"; diff --git a/src/app/users/user-settings/user-settings.component.spec.ts b/src/app/users/user-settings/user-settings.component.spec.ts index 15c8d1a35..16afb9455 100644 --- a/src/app/users/user-settings/user-settings.component.spec.ts +++ b/src/app/users/user-settings/user-settings.component.spec.ts @@ -14,7 +14,7 @@ import { UserSettingsComponent } from "./user-settings.component"; import { SharedScicatFrontendModule } from "shared/shared.module"; import { Message, MessageType } from "state-management/models"; import { showMessageAction } from "state-management/actions/user.actions"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; diff --git a/src/app/users/users.module.ts b/src/app/users/users.module.ts index cf025bc3d..8102bd982 100644 --- a/src/app/users/users.module.ts +++ b/src/app/users/users.module.ts @@ -2,7 +2,7 @@ import { UserEffects } from "./../state-management/effects/user.effects"; import { EffectsModule } from "@ngrx/effects"; import { ADAuthService } from "./adauth.service"; import { CommonModule } from "@angular/common"; -import { FlexLayoutModule } from "@angular/flex-layout"; +import { FlexLayoutModule } from "@ngbracket/ngx-layout"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { LoginComponent } from "users/login/login.component"; import { NgModule } from "@angular/core";