primeng: toggle wrapper

* Fixes the default value for the array in the editor.
* Adds margins for dd dl.

Co-Authored-by: Johnny Mariéthoz <[email protected]>

Author: jma

projects/rero/ng-core/assets/scss/_theme.scss

@@ -44,11 +44,11 @@ a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
 dl.metadata {
   @extend .grid, .my-0, .w-full, .p-2;
   dt {
-    @extend .font-bold, .col-12, .py-0;
+    @extend .font-bold, .col-12, .py-0, .mx-0, .my-1;
     @include styleclass('md:col-4');
   }
   dd {
-    @extend .col-12, .py-0, .m-0;
+    @extend .col-12, .py-0, .mx-0, .my-1;
     @include styleclass('md:col-8');
   }
 }

projects/rero/ng-core/src/lib/record/editor/services/jsonschema.service.ts

@@ -45,7 +45,7 @@ export class JSONSchemaService {
   processField(field: FormlyFieldConfig, jsonSchema: JSONSchema7) {
     // initial population of arrays with a minItems constraints
     if (field.type === 'array' && jsonSchema.minItems && !jsonSchema.hasOwnProperty('default')) {
-      field.defaultValue = new Array(jsonSchema.minItems);
+      field.defaultValue = new Array(jsonSchema.minItems).fill(null);
     }
     // If 'format' is defined into the jsonSchema, use it as props to try a validation on this field.
     // See: `email.validator.ts` file

projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts

@@ -21,18 +21,16 @@ import { isEmpty, removeEmptyValues } from '../../utils';
 @Component({
   selector: 'ng-core-editor-formly-toggle-wrapper',
   template: `
-    <div class='toggle-wrapper'>
-        <div class="custom-control custom-switch">
-          <input class="custom-control-input" type="checkbox" id="toggle-switch-{{ field.id }}"
-            (change)="toggle($event)" [checked]="tsOptions.enabled">
+        <div class="flex gap-2">
+          <p-inputSwitch  id="toggle-switch-{{ field.id }}"
+            (onChange)="toggle($event)" [ngModel]="tsOptions.enabled" />
           <label class="custom-control-label" for="toggle-switch-{{ field.id }}"
             [pTooltip]="tsOptions.description|translate" tooltipPosition="top"
           >{{ tsOptions.label | translate }}</label>
         </div>
       @if (tsOptions.enabled) {
         <ng-container #fieldComponent></ng-container>
       }
-    </div>
   `
 })
 export class ToggleWrapperComponent extends FieldWrapper implements OnInit {
@@ -75,7 +73,8 @@ export class ToggleWrapperComponent extends FieldWrapper implements OnInit {
       // toggle switch will became 'false', so just reset the field.
       //   Resetting the field will change its value and so the `valueChanges` Observer will be called. The toggle `enabled` value will
       //   be update (to false) by this method.
-      this.field.formControl.reset();  // reset all children fields
+      this.field.formControl.setErrors(null);
+      this.field.formControl.reset(this.field.defaultValue);  // reset all children fields
     } else {
       this.tsOptions.enabled = true;
       this.field.formControl.enable({emitEvent: false});