Skip to content

Commit 9d2b5e5

Browse files
Garfield-frGarfield-fr
committed
chore: editor demo with all functionalities
Co-Authored-by: Bertrand Zuchuat <[email protected]>
1 parent bdf3695 commit 9d2b5e5

File tree

12 files changed

+158
-53
lines changed

12 files changed

+158
-53
lines changed

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

+18-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* RERO angular core
3-
* Copyright (C) 2020-2023 RERO
3+
* Copyright (C) 2020-2024 RERO
44
*
55
* This program is free software: you can redistribute it and/or modify
66
* it under the terms of the GNU Affero General Public License as published by
@@ -21,8 +21,8 @@ import { Observable, of } from 'rxjs';
2121
import { HomeComponent } from './home/home.component';
2222
import { DetailComponent } from './record/document/detail/detail.component';
2323
import { DocumentComponent } from './record/document/document.component';
24-
import { EditorComponent } from './record/editor/editor.component';
2524
import { RouteService } from './routes/route.service';
25+
import { EditorComponent } from './record/editor/editor.component';
2626

2727
/**
2828
* Disallows access to admin functionalities.
@@ -194,7 +194,22 @@ const routes: Routes = [
194194
},
195195
{
196196
path: 'editor',
197-
component: EditorComponent
197+
children: [
198+
{ path: ':type', component: EditorComponent },
199+
{ path: ':type/:pid', component: EditorComponent }
200+
],
201+
data: {
202+
types: [
203+
{
204+
key: 'demo',
205+
label: 'Demo',
206+
editorSettings: {
207+
longMode: true
208+
},
209+
component: DocumentComponent
210+
}
211+
]
212+
}
198213
},
199214
{
200215
matcher: documentsMatcher,

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* RERO angular core
3-
* Copyright (C) 2020 RERO
3+
* Copyright (C) 2020-2024 RERO
44
*
55
* This program is free software: you can redistribute it and/or modify
66
* it under the terms of the GNU Affero General Public License as published by
@@ -20,7 +20,7 @@ import { FormsModule } from '@angular/forms';
2020
import { BrowserModule } from '@angular/platform-browser';
2121
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2222
import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
23-
import { CoreConfigService, RecordModule, TranslateLoader } from '@rero/ng-core';
23+
import { CoreConfigService, RecordModule, RecordService, TranslateLoader } from '@rero/ng-core';
2424
import { defineLocale } from 'ngx-bootstrap/chronos';
2525
import { CollapseModule } from 'ngx-bootstrap/collapse';
2626
import { BsLocaleService } from 'ngx-bootstrap/datepicker';
@@ -34,6 +34,7 @@ import { DetailComponent } from './record/document/detail/detail.component';
3434
import { DocumentComponent } from './record/document/document.component';
3535
import { EditorComponent } from './record/editor/editor.component';
3636
import { SearchBarComponent } from './search-bar/search-bar.component';
37+
import { RecordServiceMock } from './record/editor/record-service-mock';
3738

3839
@NgModule({
3940
declarations: [
@@ -66,7 +67,11 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
6667
provide: CoreConfigService,
6768
useClass: AppConfigService
6869
},
69-
BsLocaleService
70+
BsLocaleService,
71+
{
72+
provide: RecordService,
73+
useClass: RecordServiceMock
74+
}
7075
],
7176
bootstrap: [AppComponent]
7277
})

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
RERO angular core
3-
Copyright (C) 2020 RERO
3+
Copyright (C) 2020-2024 RERO
44
55
This program is free software: you can redistribute it and/or modify
66
it under the terms of the GNU Affero General Public License as published by
@@ -17,11 +17,10 @@
1717

1818
<div class="card mb-3">
1919
<div class="card-header">
20-
Model
20+
Model ({{ mode }})
2121
</div>
2222
<div class="card-body">
23-
<pre>{{ model | json }}</pre>
23+
<pre [innerHTML]="modelDisplay"></pre>
2424
</div>
2525
</div>
26-
<ng-core-editor [schema]="schema" [editorSettings]="editorSettings" (modelChange)="modelChanged($event)">
27-
</ng-core-editor>
26+
<ng-core-editor (modelChange)="modelChanged($event)"></ng-core-editor>

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

+16-20
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,31 @@
1414
* You should have received a copy of the GNU Affero General Public License
1515
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
*/
17-
import { Component } from '@angular/core';
18-
import JSONSchema from './schema.json';
17+
import { AfterContentChecked, Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
18+
import { ActivatedRoute } from '@angular/router';
1919

2020
@Component({
2121
selector: 'app-editor',
2222
templateUrl: './editor.component.html'
2323
})
24-
export class EditorComponent {
25-
26-
// editor settings
27-
editorSettings = {
28-
longMode: true, // editor long mode
29-
template: {
30-
recordType: undefined, // the resource considerate as template
31-
loadFromTemplate: false, // enable load from template button
32-
saveAsTemplate: false // allow to save the record as a template
33-
}
34-
};
35-
36-
// JSONSchema
37-
schema = {};
24+
export class EditorComponent implements OnInit, AfterContentChecked {
3825

3926
// form initial values
4027
model = {};
4128

42-
/** Constructor */
43-
constructor() {
44-
this.schema = JSONSchema;
29+
modelDisplay = {};
30+
31+
/** Edit or New mode */
32+
mode: 'Edit' | 'New' = 'New';
33+
34+
constructor(private route: ActivatedRoute) {}
35+
36+
ngOnInit(): void {
37+
this.mode = 'pid' in this.route.snapshot.params ? 'Edit' : 'New';
38+
}
39+
40+
ngAfterContentChecked(): void {
41+
this.modelDisplay = JSON.stringify(this.model, null, 2);
4542
}
4643

4744
/** Callback when the model values has changed.
@@ -50,5 +47,4 @@ export class EditorComponent {
5047
modelChanged(value: object) {
5148
this.model = value;
5249
}
53-
5450
}

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* RERO angular core
3+
* Copyright (C) 2024 RERO
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU Affero General Public License as published by
7+
* the Free Software Foundation, version 3 of the License.
8+
*
9+
* This program is distributed in the hope that it will be useful,
10+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
* GNU Affero General Public License for more details.
13+
*
14+
* You should have received a copy of the GNU Affero General Public License
15+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
*/
17+
import { Error, RecordService } from "@rero/ng-core";
18+
import { Observable, of } from "rxjs";
19+
import data from './recordData.json';
20+
import JSONSchema from './schema.json';
21+
22+
export class RecordServiceMock extends RecordService {
23+
getSchemaForm(recordType: string): Observable<any> {
24+
return of({ schema: JSONSchema });
25+
}
26+
27+
getRecord(type: string, pid: string, resolve = 0, headers: any = {}): Observable<any | Error> {
28+
return of(data);
29+
}
30+
}

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"created": "2024-03-06T07:47:33.944191+00:00",
3+
"id": "1",
4+
"links": {
5+
"self": "https://ilsdev.test.rero.ch/api/demo/1"
6+
},
7+
"metadata": {
8+
"$schema": "https://bib.rero.ch/schemas/demo/demo.json",
9+
"pid": "1",
10+
"required": "value required",
11+
"defaultHidden": "default value",
12+
"array_of_array": [
13+
["value 1", "value 2"],
14+
["value 3"]
15+
],
16+
"hidden_with_default": "Default hidden",
17+
"readonly_changeable": "Value 1",
18+
"hide_with_required_expression_control": "Optional",
19+
"selectMultiple": ["value2", "value3"],
20+
"markdown": "Hello **world**.\nGreat day.",
21+
"array_with_multicheckbox": ["checkbox1", "checkbox2"],
22+
"input_with_default_value": "slrofar6uh",
23+
"enum": "val1"
24+
},
25+
"updated": "2024-03-06T07:47:33.944197+00:00"
26+
}

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

+44-10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"type": "object",
44
"title": "Test editor",
55
"additionalProperties": false,
6+
"required": [
7+
"required"
8+
],
69
"propertiesOrder": [
710
"oneOf",
811
"optional",
@@ -42,10 +45,18 @@
4245
"field_expressions",
4346
"field_with_addon_left_right"
4447
],
45-
"required": [
46-
"required"
47-
],
4848
"properties": {
49+
"$schema": {
50+
"title": "Schema",
51+
"type": "string",
52+
"minLength": 9,
53+
"default": "https://bib.rero.ch/schemas/demo/demo.json"
54+
},
55+
"pid": {
56+
"title": "Demo ID",
57+
"type": "string",
58+
"minLength": 1
59+
},
4960
"oneOf": {
5061
"title": "oneOf",
5162
"type": "object",
@@ -75,8 +86,8 @@
7586
"className": "col-lg-6",
7687
"widget": {
7788
"formlyConfig": {
78-
"hide": true,
7989
"props": {
90+
"hide": true,
8091
"itemCssClass": "col-lg-6"
8192
}
8293
}
@@ -177,7 +188,12 @@
177188
"minLength": 1,
178189
"widget": {
179190
"formlyConfig": {
180-
"hide": true
191+
"props": {
192+
"hide": true,
193+
"navigation": {
194+
"essential": true
195+
}
196+
}
181197
}
182198
}
183199
},
@@ -201,8 +217,8 @@
201217
"minLength": 3,
202218
"widget": {
203219
"formlyConfig": {
204-
"hide": true,
205220
"props": {
221+
"hide": true,
206222
"navigation": {
207223
"essential": true
208224
}
@@ -436,8 +452,8 @@
436452
"minLength": 3,
437453
"widget": {
438454
"formlyConfig": {
439-
"hide": true,
440455
"props": {
456+
"hide": true,
441457
"itemCssClass": "col-6"
442458
}
443459
}
@@ -555,8 +571,8 @@
555571
"default": "Default hidden",
556572
"widget": {
557573
"formlyConfig": {
558-
"hide": true,
559574
"props": {
575+
"hide": true,
560576
"navigation": {
561577
"essential": true
562578
}
@@ -599,7 +615,9 @@
599615
"minLength": 3,
600616
"widget": {
601617
"formlyConfig": {
602-
"hide": true,
618+
"props": {
619+
"hide": true
620+
},
603621
"expressions": {
604622
"props.required": "field.parent.model.hide_with_required_expression_control === 'required'"
605623
}
@@ -631,7 +649,9 @@
631649
"minLength": 3,
632650
"widget": {
633651
"formlyConfig": {
634-
"hide": true,
652+
"props": {
653+
"hide": true
654+
},
635655
"expressions": {
636656
"props.required": "field.parent.parent.model.hide_with_required_expression_control === 'required'"
637657
}
@@ -1106,6 +1126,20 @@
11061126
}
11071127
}
11081128
}
1129+
},
1130+
"field_hide_toc": {
1131+
"title": "Hide field",
1132+
"type": "string",
1133+
"widget": {
1134+
"formlyConfig": {
1135+
"props": {
1136+
"hide": true,
1137+
"navigation": {
1138+
"essential": true
1139+
}
1140+
}
1141+
}
1142+
}
11091143
}
11101144
},
11111145
"definitions": {

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ export class AppMenuService {
9191
menu.addChild('Organisation records')
9292
.setRouterLink(['/records', 'organisations']);
9393
menu.addChild('Editor')
94-
.setRouterLink(['/editor'])
94+
.setRouterLink(['/editor', 'demo'])
95+
.setExtra('iconClass', 'fa fa-edit');
96+
menu.addChild('Editor mode edit')
97+
.setRouterLink(['/editor', 'demo', '1'])
9598
.setExtra('iconClass', 'fa fa-edit');
9699
}
97100
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
<ul class="section-nav">
100100
@for (f of tocFields$ | async; track f) {
101101
<li class="toc-entry toc-h2 mb-1">
102-
<a href (click)="setFocus($event, f)">{{ f.props.label }}</a>
102+
<a href (click)="setFocus($event, f)">{{ f.props.label | translate }}</a>
103103
</li>
104104
}
105105
</ul>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ export class EditorComponent extends AbstractCanDeactivateComponent implements O
474474
field.props.type = jsonSchema.format;
475475
}
476476

477-
if (jsonSchema.widget && jsonSchema.widget.formlyConfig) {
477+
if (jsonSchema?.widget?.formlyConfig) {
478478
const { props } = jsonSchema.widget.formlyConfig;
479479

480480
if (props) {

‎projects/rero/ng-core/src/lib/record/editor/extensions.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class NgCoreFormlyExtension {
7272
// String fields in an array parent are automatically required.
7373
// This should not be the case, so we change them to not required.
7474
if (field.parent?.type === 'array' && field.props.required) {
75-
field.props.required = false;
75+
// field.props.required = false;
7676
}
7777
this._setWrappers(field);
7878
this._hideEmptyField(field);
@@ -246,8 +246,7 @@ export class NgCoreFormlyExtension {
246246
// only during the editor initialization
247247
&& !rootField?.formControl?.touched)
248248
) {
249-
field.hide = true;
250-
field.props.editorComponent().addHiddenField(field);
249+
field.props.editorComponent().hide(field);
251250
}
252251
}
253252
}

0 commit comments

Comments
 (0)