refactor: primeng

.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 
 # eslint
 .eslintcache
+
+# cache
+.nx/

angular.json

@@ -3,6 +3,11 @@
   "version": 1,
   "projects": {
     "@rero/ng-core": {
+      "schematics": {
+        "@schematics/angular:component": {
+          "standalone": false
+        }
+      },
       "projectType": "library",
       "root": "projects/rero/ng-core",
       "sourceRoot": "projects/rero/ng-core/src",
@@ -40,7 +45,8 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "standalone": false
         }
       },
       "root": "projects/ng-core-tester",
@@ -66,13 +72,7 @@
               "projects/ng-core-tester/src/assets"
             ],
             "styles": [
-              "projects/ng-core-tester/src/styles.scss",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/ngx-spinner/animations/ball-zig-zag.css",
-              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
+              "projects/ng-core-tester/src/styles.scss"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -144,10 +144,6 @@
             "assets": [
               "projects/ng-core-tester/src/favicon.ico",
               "projects/ng-core-tester/src/assets"
-            ],
-            "styles": [
-              "projects/ng-core-tester/src/styles.scss",
-              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
             ]
           }
         },

package.json

@@ -23,7 +23,6 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
-    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@ngx-formly/core": "^6.3.6",
     "@ngx-formly/primeng": "^6.3.6",
     "@ngx-translate/core": "^15.0.0",
@@ -35,14 +34,13 @@
     "font-awesome": "^4.7.0",
     "js-generate-password": "^0.1.0",
     "lodash-es": "^4.17.21",
+    "luxon": "^3.5.0",
     "marked": "^10.0.0",
-    "moment": "^2.30.1",
-    "ngx-bootstrap": "^12.0.0",
     "ngx-spinner": "^16.0.2",
-    "ngx-toastr": "^18.0.0",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.5.0",
+    "primeicons": "^7.0.0",
+    "primelocale": "^1.0.3",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.3"
@@ -57,6 +55,7 @@
     "@angular/cli": "^17.1.0",
     "@angular/compiler-cli": "^17.1.0",
     "@angular/language-service": "^17.1.0",
+    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@ngx-formly/schematics": "^6.3.6",
     "@types/jasmine": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^6.19.1",

projects/ng-core-tester/src/app/app-routing.module.ts

@@ -21,8 +21,8 @@ import { Observable, of } from 'rxjs';
 import { HomeComponent } from './home/home.component';
 import { DetailComponent } from './record/document/detail/detail.component';
 import { DocumentComponent } from './record/document/document.component';
-import { RouteService } from './routes/route.service';
 import { EditorComponent } from './record/editor/editor.component';
+import { RouteService } from './routes/route.service';
 
 /**
  * Disallows access to admin functionalities.
@@ -207,6 +207,14 @@ const routes: Routes = [
             longMode: true
           },
           component: DocumentComponent
+        },
+        {
+          key: 'normal',
+          label: 'normal',
+          editorSettings: {
+            longMode: false
+          },
+          component: DocumentComponent
         }
       ]
     }
@@ -377,6 +385,16 @@ const routes: Routes = [
               label: 'Title',
               value: 'title'
             }
+          ],
+          exportFormats: [
+            {
+              label: 'CSV',
+              url: 'CSV'
+            },
+            {
+              label: 'TXT',
+              url: 'txt'
+            }
           ]
         },
         {
@@ -407,13 +425,7 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class AppRoutingModule {
-  /**
-   * Constructor
-   *
-   * Initializes routes.
-   *
-   * @param _routeService Route service
-   */
+
   constructor(private _routeService: RouteService) {
     this._routeService.initializeRoutes();
   }

projects/ng-core-tester/src/app/app.component.html

@@ -14,23 +14,18 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <div class="container">
-    <a class="navbar-brand" routerLink="/">Invenio Core</a>
-    <button type="button" class="navbar-toggler" (click)="isCollapsed = !isCollapsed"
-    [attr.aria-expanded]="!isCollapsed" aria-controls="navbarSupportedContent">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+<p-toast />
+<p-confirmDialog />
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed" [isAnimated]="true">
-      <ng-core-menu-widget class="mr-auto" [menu]="appMenu"></ng-core-menu-widget>
-      <ng-core-menu-widget [menu]="languageMenu" (clickItem)="eventChangeLang($event)"></ng-core-menu-widget>
-      <app-search-bar class="ml-md-2" viewcode="sonar" size="small"></app-search-bar>
+<div class="container my-5">
+  <div class="flex align-items-center gap-2 mb-4">
+    <div class="flex flex-auto">
+      <app-menu />
+    </div>
+    <div class="flex flex-auto justify-content-end">
+      <app-search-bar class="w-full" viewcode="sonar"></app-search-bar>
     </div>
   </div>
-</nav>
-
-<div class="container my-5">
   <router-outlet></router-outlet>
 </div>
 

projects/ng-core-tester/src/app/app.component.ts

@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,11 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
-import { CoreConfigService, MenuItem, RecordEvent, RecordService, TitleMetaService, TranslateService } from '@rero/ng-core';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { ToastrService } from 'ngx-toastr';
-import { AppMenuService } from './service/app-menu.service';
+import { Component, OnInit, inject } from '@angular/core';
+import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
+import { MenuItem, MessageService } from 'primeng/api';
 
 /**
  * Main component of the application.
@@ -28,8 +26,13 @@ import { AppMenuService } from './service/app-menu.service';
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
-  // Current lang of the application
-  lang: string = document.documentElement.lang;
+
+  /** Service injection */
+  // translateService = inject(TranslateService);
+  configService = inject(CoreConfigService);
+  titleMetaService = inject(TitleMetaService);
+  recordService = inject(RecordService);
+  messageService = inject(MessageService);
 
   // Available languages
   languages: string[];
@@ -43,82 +46,37 @@ export class AppComponent implements OnInit {
   // Application language menu
   languageMenu: MenuItem;
 
-  /**
-   * Constructor.
-   * @param _translateService Translate service.
-   * @param _configService Configuration service.
-   * @param _titleMetaService Meta service.
-   * @param _recordService Record service.
-   * @param _toastrService Toast service.
-   * @param _bsLocaleService Locale service for bootstrap.
-   * @param _menuService Interface menu
-   */
-  constructor(
-    private _translateService: TranslateService,
-    private _configService: CoreConfigService,
-    private _titleMetaService: TitleMetaService,
-    private _recordService: RecordService,
-    private _toastrService: ToastrService,
-    private _bsLocaleService: BsLocaleService,
-    private _appMenuService: AppMenuService
-  ) {
-  }
-
   /**
    * Component initialization.
    *
    * - Initializes listener to record changes.
-   * - Initializes languages and current language.
    * - Sets title metadata.
    */
   ngOnInit() {
     this.initializeEvents();
-    this._translateService.setLanguage(this.lang);
-    this.appMenu = this._appMenuService.generateApplicationMenu();
-    this.languageMenu = this._appMenuService.generateLanguageMenu(
-      this._configService.languages,
-      this.lang
-    );
     // Set default title window when application start
-    const prefix = this._configService.prefixWindow;
+    const prefix = this.configService.prefixWindow;
     if (prefix) {
-      this._titleMetaService.setPrefix(prefix);
+      this.titleMetaService.setPrefix(prefix);
     }
-    this._titleMetaService.setTitle('Welcome');
-  }
-
-  /**
-   * Event change language
-   * @param item - MenuItem
-   */
-  eventChangeLang(item: MenuItem) {
-    this.languageMenu.getChildren().forEach((menu: MenuItem) => {
-      if (menu.isActive()) {
-        menu.deleteLabelAttribute('class');
-        menu.setActive(false);
-      }
-    });
-    item.setLabelAttribute('class', 'font-weight-bold')
-        .setActive(true);
-    this._translateService.setLanguage(item.getName());
-    this._bsLocaleService.use(item.getName());
+    this.titleMetaService.setTitle('Welcome');
   }
 
   /**
    * Initializes listening of events when a record is changed.
    */
   private initializeEvents() {
-    this._recordService.onCreate$.subscribe((recordEvent: RecordEvent) => {
-      const pid = recordEvent.data.record.pid;
-      this._toastrService.info(`Call Record Event on create (Record Pid: ${pid})`);
+    this.recordService.onCreate$.subscribe((recordEvent: RecordEvent) => {
+      const {pid} = recordEvent.data.record;
+      this.messageService.add({ severity: 'info', summary: 'Record', detail: `Call Record Event on create (Record Pid: ${pid})`});
     });
-    this._recordService.onUpdate$.subscribe((recordEvent: RecordEvent) => {
-      const pid = recordEvent.data.record.pid;
-      this._toastrService.info(`Call Record Event on update (Record Pid: ${pid})`);
+    this.recordService.onUpdate$.subscribe((recordEvent: RecordEvent) => {
+      const {pid} = recordEvent.data.record;
+      this.messageService.add({ severity: 'info', summary: 'Record', detail: `Call Record Event on update (Record Pid: ${pid})`});
     });
-    this._recordService.onDelete$.subscribe((recordEvent: RecordEvent) => {
-      const pid = recordEvent.data.pid;
-      this._toastrService.info(`Call Record Event on delete (Record Pid: ${pid})`);
+    this.recordService.onDelete$.subscribe((recordEvent: RecordEvent) => {
+      const {pid} = recordEvent.data.record;
+      this.messageService.add({ severity: 'info', summary: 'Record', detail: `Call Record Event on delete (Record Pid: ${pid})`});
     });
   }
 }