chore: editor demo with all functionalities

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

Author: Garfield-fr

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

@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020-2023 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
@@ -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 { EditorComponent } from './record/editor/editor.component';
 import { RouteService } from './routes/route.service';
+import { EditorComponent } from './record/editor/editor.component';
 
 /**
  * Disallows access to admin functionalities.
@@ -194,7 +194,22 @@ const routes: Routes = [
   },
   {
     path: 'editor',
-    component: EditorComponent
+    children: [
+      { path: ':type', component: EditorComponent },
+      { path: ':type/:pid', component: EditorComponent }
+    ],
+    data: {
+      types: [
+        {
+          key: 'demo',
+          label: 'Demo',
+          editorSettings: {
+            longMode: true
+          },
+          component: DocumentComponent
+        }
+      ]
+    }
   },
   {
     matcher: documentsMatcher,

projects/ng-core-tester/src/app/app.module.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
@@ -20,7 +20,7 @@ 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, TranslateLoader } from '@rero/ng-core';
+import { CoreConfigService, RecordModule, RecordService, TranslateLoader } from '@rero/ng-core';
 import { defineLocale } from 'ngx-bootstrap/chronos';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsLocaleService } from 'ngx-bootstrap/datepicker';
@@ -34,6 +34,7 @@ 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';
 
 @NgModule({
     declarations: [
@@ -66,7 +67,11 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
             provide: CoreConfigService,
             useClass: AppConfigService
         },
-        BsLocaleService
+        BsLocaleService,
+        {
+            provide: RecordService,
+            useClass: RecordServiceMock
+        }
     ],
     bootstrap: [AppComponent]
 })

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

@@ -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
@@ -17,11 +17,10 @@
 
 <div class="card mb-3">
   <div class="card-header">
-    Model
+    Model ({{ mode }})
   </div>
   <div class="card-body">
-    <pre>{{ model | json }}</pre>
+    <pre [innerHTML]="modelDisplay"></pre>
   </div>
 </div>
-<ng-core-editor [schema]="schema" [editorSettings]="editorSettings" (modelChange)="modelChanged($event)">
-</ng-core-editor>
+<ng-core-editor (modelChange)="modelChanged($event)"></ng-core-editor>

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

@@ -14,34 +14,38 @@
  * 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 } from '@angular/core';
-import JSONSchema from './schema.json';
+import { AfterContentChecked, Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-editor',
   templateUrl: './editor.component.html'
 })
-export class EditorComponent {
-
-  // editor settings
-  editorSettings = {
-    longMode: true,  // editor long mode
-    template: {
-      recordType: undefined,    // the resource considerate as template
-      loadFromTemplate: false,  // enable load from template button
-      saveAsTemplate: false     // allow to save the record as a template
-    }
-  };
-
-  // JSONSchema
-  schema = {};
-
-  // form initial values
+export class EditorComponent implements OnInit, AfterContentChecked {
+
+  /* form initial values */
   model = {};
 
-  /** Constructor */
-  constructor() {
-    this.schema = JSONSchema;
+  /* Model to display on the top of the form */
+  modelDisplay = {};
+
+  /** Edit or New mode */
+  mode: 'Edit' | 'New' = 'New';
+
+  /**
+   * Constructor
+   * @param route - ActivatedRoute
+   */
+  constructor(private route: ActivatedRoute) {}
+
+  /** OnInit hook */
+  ngOnInit(): void {
+    this.mode = 'pid' in this.route.snapshot.params ? 'Edit' : 'New';
+  }
+
+  /** after content checked hook */
+  ngAfterContentChecked(): void {
+    this.modelDisplay = JSON.stringify(this.model, null, 2);
   }
 
   /** Callback when the model values has changed.
@@ -50,5 +54,4 @@ export class EditorComponent {
   modelChanged(value: object) {
     this.model = value;
   }
-
 }

projects/ng-core-tester/src/app/record/editor/record-service-mock.ts

@@ -0,0 +1,30 @@
+/*
+ * RERO angular core
+ * Copyright (C) 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/>.
+ */
+import { Error, RecordService } from "@rero/ng-core";
+import { Observable, of } from "rxjs";
+import data from './recordData.json';
+import JSONSchema from './schema.json';
+
+export class RecordServiceMock extends RecordService {
+  getSchemaForm(recordType: string): Observable<any> {
+    return of({ schema: JSONSchema });
+  }
+
+  getRecord(type: string, pid: string, resolve = 0, headers: any = {}): Observable<any | Error> {
+    return of(data);
+  }
+}

projects/ng-core-tester/src/app/record/editor/recordData.json

@@ -0,0 +1,26 @@
+{
+  "created": "2024-03-06T07:47:33.944191+00:00",
+  "id": "1",
+  "links": {
+      "self": "https://ilsdev.test.rero.ch/api/demo/1"
+  },
+  "metadata": {
+      "$schema": "https://bib.rero.ch/schemas/demo/demo.json",
+      "pid": "1",
+      "required": "value required",
+      "defaultHidden": "default value",
+      "array_of_array": [
+        ["value 1", "value 2"],
+        ["value 3"]
+      ],
+      "hidden_with_default": "Default hidden",
+      "readonly_changeable": "Value 1",
+      "hide_with_required_expression_control": "Optional",
+      "selectMultiple": ["value2", "value3"],
+      "markdown": "Hello **world**.\nGreat day.",
+      "array_with_multicheckbox": ["checkbox1", "checkbox2"],
+      "input_with_default_value": "slrofar6uh",
+      "enum": "val1"
+  },
+  "updated": "2024-03-06T07:47:33.944197+00:00"
+}

projects/ng-core-tester/src/app/record/editor/schema.json

@@ -3,6 +3,9 @@
   "type": "object",
   "title": "Test editor",
   "additionalProperties": false,
+  "required": [
+    "required"
+  ],
   "propertiesOrder": [
     "oneOf",
     "optional",
@@ -42,10 +45,18 @@
     "field_expressions",
     "field_with_addon_left_right"
   ],
-  "required": [
-    "required"
-  ],
   "properties": {
+    "$schema": {
+      "title": "Schema",
+      "type": "string",
+      "minLength": 9,
+      "default": "https://bib.rero.ch/schemas/demo/demo.json"
+    },
+    "pid": {
+      "title": "Demo ID",
+      "type": "string",
+      "minLength": 1
+    },
     "oneOf": {
       "title": "oneOf",
       "type": "object",
@@ -75,8 +86,8 @@
               "className": "col-lg-6",
               "widget": {
                 "formlyConfig": {
-                  "hide": true,
                   "props": {
+                    "hide": true,
                     "itemCssClass": "col-lg-6"
                   }
                 }
@@ -177,7 +188,12 @@
       "minLength": 1,
       "widget": {
         "formlyConfig": {
-          "hide": true
+          "props": {
+            "hide": true,
+            "navigation": {
+              "essential": true
+            }
+          }
         }
       }
     },
@@ -201,8 +217,8 @@
       "minLength": 3,
       "widget": {
         "formlyConfig": {
-          "hide": true,
           "props": {
+            "hide": true,
             "navigation": {
               "essential": true
             }
@@ -436,8 +452,8 @@
             "minLength": 3,
             "widget": {
               "formlyConfig": {
-                "hide": true,
                 "props": {
+                  "hide": true,
                   "itemCssClass": "col-6"
                 }
               }
@@ -555,8 +571,8 @@
       "default": "Default hidden",
       "widget": {
         "formlyConfig": {
-          "hide": true,
           "props": {
+            "hide": true,
             "navigation": {
               "essential": true
             }
@@ -599,7 +615,9 @@
       "minLength": 3,
       "widget": {
         "formlyConfig": {
-          "hide": true,
+          "props": {
+            "hide": true
+          },
           "expressions": {
             "props.required": "field.parent.model.hide_with_required_expression_control === 'required'"
           }
@@ -631,7 +649,9 @@
           "minLength": 3,
           "widget": {
             "formlyConfig": {
-              "hide": true,
+              "props": {
+                "hide": true
+              },
               "expressions": {
                 "props.required": "field.parent.parent.model.hide_with_required_expression_control === 'required'"
               }
@@ -1106,6 +1126,20 @@
           }
         }
       }
+    },
+    "field_hide_toc": {
+      "title": "Hide field",
+      "type": "string",
+      "widget": {
+        "formlyConfig": {
+          "props": {
+            "hide": true,
+            "navigation": {
+              "essential": true
+            }
+          }
+        }
+      }
     }
   },
   "definitions": {

projects/ng-core-tester/src/app/service/app-menu.service.ts

@@ -91,7 +91,10 @@ export class AppMenuService {
     menu.addChild('Organisation records')
       .setRouterLink(['/records', 'organisations']);
     menu.addChild('Editor')
-      .setRouterLink(['/editor'])
+      .setRouterLink(['/editor', 'demo'])
+      .setExtra('iconClass', 'fa fa-edit');
+    menu.addChild('Editor mode edit')
+      .setRouterLink(['/editor', 'demo', '1'])
       .setExtra('iconClass', 'fa fa-edit');
   }
 }

projects/rero/ng-core/src/lib/record/detail/view/json.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
@@ -23,10 +23,10 @@ import { DetailRecord } from './detail-record';
  */
 @Component({
   template: `
-    <ng-container *ngIf="record">
+    @if (record) {
       <h1>Record of type "{{ type }}" #{{ record.id }}</h1>
       {{ record|json }}
-    </ng-container>
+    }
   `
 })
 export class JsonComponent implements DetailRecord, OnInit {

projects/rero/ng-core/src/lib/record/editor/editor.component.html

@@ -99,7 +99,7 @@
               <ul class="section-nav">
                 @for (f of tocFields$ | async; track f) {
                   <li class="toc-entry toc-h2 mb-1">
-                      <a href (click)="setFocus($event, f)">{{ f.props.label }}</a>
+                      <a href (click)="setFocus($event, f)">{{ f.props.label | translate }}</a>
                   </li>
                 }
               </ul>