refactor: primeng

Co-Authored-by: Bertrand Zuchuat <[email protected]>

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

@@ -41,8 +41,8 @@
     "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",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.3"

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

@@ -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, TranslateService } from '@rero/ng-core';
+import { MenuItem, MessageService } from 'primeng/api';
 
 /**
  * Main component of the application.
@@ -28,6 +26,14 @@ import { AppMenuService } from './service/app-menu.service';
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
+
+  /** Service injection */
+  translateService = inject(TranslateService);
+  configService = inject(CoreConfigService);
+  titleMetaService = inject(TitleMetaService);
+  recordService = inject(RecordService);
+  messageService = inject(MessageService);
+
   // Current lang of the application
   lang: string = document.documentElement.lang;
 
@@ -42,28 +48,6 @@ 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.
    *
@@ -73,52 +57,30 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     this.initializeEvents();
-    this._translateService.setLanguage(this.lang);
-    this.appMenu = this._appMenuService.generateApplicationMenu();
-    this.languageMenu = this._appMenuService.generateLanguageMenu(
-      this._configService.languages,
-      this.lang
-    );
+    this.translateService.setLanguage(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})`});
     });
   }
 }

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

@@ -20,21 +20,25 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, RecordModule, RecordService, TranslateLoader } from '@rero/ng-core';
+import { CoreConfigService, RecordModule, RecordService, RemoteAutocompleteService, TranslateLoader } from '@rero/ng-core';
 import { defineLocale } from 'ngx-bootstrap/chronos';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { deLocale, enGbLocale, frLocale, itLocale } from 'ngx-bootstrap/locale';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
+import { MenubarModule } from 'primeng/menubar';
 import { AppConfigService } from './app-config.service';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { AppDialogComponent } from './home/dialog/app-dialog.component';
 import { HomeComponent } from './home/home.component';
+import { ToastComponent } from './home/toast/toast.component';
 import { DetailComponent } from './record/document/detail/detail.component';
 import { DocumentComponent } from './record/document/document.component';
 import { EditorComponent } from './record/editor/editor.component';
-import { SearchBarComponent } from './search-bar/search-bar.component';
 import { RecordServiceMock } from './record/editor/record-service-mock';
+import { SearchBarComponent } from './search-bar/search-bar.component';
+import { MenuComponent } from './menu/menu.component';
+import { AppRemoteAutocompleteService } from './service/app-remote-autocomplete.service';
 
 @NgModule({
     declarations: [
@@ -43,7 +47,10 @@ import { RecordServiceMock } from './record/editor/record-service-mock';
         HomeComponent,
         DetailComponent,
         SearchBarComponent,
-        EditorComponent
+        EditorComponent,
+        ToastComponent,
+        AppDialogComponent,
+        MenuComponent
     ],
     imports: [
         BrowserModule,
@@ -60,17 +67,21 @@ import { RecordServiceMock } from './record/editor/record-service-mock';
                 deps: [CoreConfigService, HttpClient]
             }
         }),
-        RecordModule
+        RecordModule,
+        MenubarModule,
     ],
     providers: [
         {
-            provide: CoreConfigService,
-            useClass: AppConfigService
+          provide: CoreConfigService,
+          useClass: AppConfigService
+        },
+        {
+          provide: RecordService,
+          useClass: RecordServiceMock
         },
-        BsLocaleService,
         {
-            provide: RecordService,
-            useClass: RecordServiceMock
+          provide: RemoteAutocompleteService,
+          useClass: AppRemoteAutocompleteService
         }
     ],
     bootstrap: [AppComponent]

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

@@ -0,0 +1,17 @@
+<!--
+  RERO angular core
+  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
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  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/>.
+-->
+<p-button (click)="confirm($event)" [label]="'Save'|translate" [outlined]="true" />