editor: customize fields by resource

* Allows to customize fields by implementing a map function in route configuration. Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch> Co-Authored-by: Sébastien Délèze <sebastien.deleze@rero.ch>
rero · Jan 29, 2020 · bffef6d · bffef6d
1 parent e262e71
commit bffef6d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts
@@ -15,15 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule, UrlSegment } from '@angular/router';
-import { of, Observable } from 'rxjs';
-
-import { DetailComponent as RecordDetailComponent, RecordSearchComponent, EditorComponent } from '@rero/ng-core';
-
+import { RouterModule, Routes, UrlSegment } from '@angular/router';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { DetailComponent as RecordDetailComponent, EditorComponent, RecordSearchComponent } from '@rero/ng-core';
+import { JSONSchema7 } from 'json-schema';
+import { ActionStatus } from 'projects/rero/ng-core/src/public-api';
+import { Observable, of } from 'rxjs';
 import { HomeComponent } from './home/home.component';
-import { DocumentComponent } from './record/document/document.component';
 import { DetailComponent } from './record/document/detail/detail.component';
-import { ActionStatus } from 'projects/rero/ng-core/src/public-api';
+import { DocumentComponent } from './record/document/document.component';
 
 const canAdd = (record: any): Observable<ActionStatus> => {
   return of({
@@ -53,6 +53,14 @@ const canRead = (record: any): Observable<ActionStatus> => {
   });
 };
 
+const formFieldMap = (field: FormlyFieldConfig, jsonSchema: JSONSchema7): FormlyFieldConfig => {
+  // Populates each select with custom options
+  if (field.type === 'enum') {
+    field.templateOptions.options = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' } ];
+  }
+  return field;
+};
+
 const aggregations = (agg: object) => {
   return of(agg);
 };
@@ -226,6 +234,7 @@ const routes: Routes = [
           canDelete,
           canRead,
           aggregations,
+          formFieldMap,
           listHeaders: {
             'Content-Type': 'application/rero+json'
           },

diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts
@@ -69,6 +69,9 @@ export class EditorComponent implements OnInit, OnDestroy {
   // subscribers
   private _subscribers: Subscription[] = [];
 
+  // Config for resource
+  private _resourceConfig: any;
+
   /**
    * Constructor
    * @param formlyJsonschema - FormlyJsonschema, the ngx-fomly jsonschema service
@@ -102,8 +105,8 @@ export class EditorComponent implements OnInit, OnDestroy {
 
         this.recordType = params.type;
         this.recordUiService.types = this.route.snapshot.data.types;
-        const config = this.recordUiService.getResourceConfig(this.recordType);
-        if (config.editorLongMode === true) {
+        this._resourceConfig = this.recordUiService.getResourceConfig(this.recordType);
+        if (this._resourceConfig.editorLongMode === true) {
           this.longMode = true;
           this._subscribers.push(
             this.editorService.hiddenFields$.subscribe(() =>
@@ -273,6 +276,10 @@ export class EditorComponent implements OnInit, OnDestroy {
             ];
           }
 
+          if (this._resourceConfig.formFieldMap) {
+            return this._resourceConfig.formFieldMap(field, jsonSchema);
+          }
+
           return field;
         }
       })

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts
@@ -16,6 +16,8 @@
  */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { JSONSchema7 } from 'json-schema';
 import { combineLatest } from 'rxjs';
 
 @Component({
@@ -90,7 +92,8 @@ export class RecordSearchComponent implements OnInit {
     pagination?: {
       boundaryLinks?: boolean,
       maxSize?: number
-    }
+    },
+    formFieldMap?: (field: FormlyFieldConfig, jsonSchema: JSONSchema7) => FormlyFieldConfig
   }[] = [{ key: 'documents', label: 'Documents' }];
 
   /**

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -14,13 +14,14 @@
  * 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, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { of, Observable } from 'rxjs';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { JSONSchema7 } from 'json-schema';
+import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
-
-import { RecordService } from '../record.service';
 import { ActionStatus } from '../action-status';
 import { RecordUiService } from '../record-ui.service';
+import { RecordService } from '../record.service';
 
 @Component({
   selector: 'ng-core-record-search',
@@ -131,7 +132,8 @@ export class RecordSearchComponent implements OnInit, OnChanges {
     pagination?: {
       boundaryLinks?: boolean,
       maxSize?: number
-    }
+    },
+    formFieldMap?: (field: FormlyFieldConfig, jsonSchema: JSONSchema7) => FormlyFieldConfig
   }[] = [{ key: 'documents', label: 'Documents' }];
 
   /**