editor: fix can remove field when a hide expression exists

* Avoids the possiblity to remove or add a field with an hide expression (tash button on the label component). * Adds an exemple in the demo editor. * Does not add a field with an hide expression during the edit initialization. In the previous versions the field was in the editor and in the completion menu. * Fixes hide then show a field of array type at the root level. An example has been added. Co-Authored-by: Johnny Mariéthoz <[email protected]>
rero · Jul 30, 2024 · 065d918 · 065d918
1 parent e3a4402
commit 065d918
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 4 deletions.
diff --git a/projects/ng-core-tester/src/app/record/editor/recordData.json b/projects/ng-core-tester/src/app/record/editor/recordData.json
@@ -20,7 +20,13 @@
       "markdown": "Hello **world**.\nGreat day.",
       "array_with_multicheckbox": ["checkbox1", "checkbox2"],
       "input_with_default_value": "slrofar6uh",
-      "enum": "val1"
+      "enum": "val1",
+      "notes": [
+        {
+          "type": "staff_note",
+          "content": "test"
+        }
+      ]
   },
   "updated": "2024-03-06T07:47:33.944197+00:00"
 }
diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -7,9 +7,11 @@
     "required"
   ],
   "propertiesOrder": [
+    "notes",
     "oneOf",
     "optional",
     "required",
+    "optional_hide_expression_field",
     "essential",
     "hidden",
     "defaultHidden",
@@ -47,6 +49,91 @@
     "field_radio_button_inline"
   ],
   "properties": {
+    "notes": {
+      "title": "Notes",
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "title": "Note",
+        "propertiesOrder": [
+          "type",
+          "content"
+        ],
+        "required": [
+          "type",
+          "content"
+        ],
+        "properties": {
+          "type": {
+            "type": "string",
+            "title": "Type",
+            "enum": [
+              "staff_note",
+              "vendor_note"
+            ],
+            "default": "staff_note",
+            "widget": {
+              "formlyConfig": {
+                "type": "selectWithSort",
+                "props": {
+                  "options": [
+                    {
+                      "label": "vendor_note",
+                      "value": "vendor_note"
+                    },
+                    {
+                      "label": "staff_note",
+                      "value": "staff_note"
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          "content": {
+            "type": "string",
+            "title": "Content",
+            "maxLength": 2000,
+            "minLength": 1,
+            "widget": {
+              "formlyConfig": {
+                "type": "textarea",
+                "props": {
+                  "rows": 3
+                }
+              }
+            }
+          }
+        }
+      },
+      "widget": {
+        "formlyConfig": {
+          "wrappers": [
+            "card"
+          ],
+          "props": {
+            "validation": {
+              "validators": {
+                "uniqueValueKeysInObject": {
+                  "keys": [
+                    "type"
+                  ]
+                }
+              },
+              "messages": {
+                "uniqueValueKeysInObjectMessage": "Only one note per type is allowed"
+              }
+            },
+            "hide": true,
+            "navigation": {
+              "essential": true
+            }
+          }
+        }
+      }
+    },
     "$schema": {
       "title": "Schema",
       "type": "string",
@@ -251,6 +338,21 @@
         }
       }
     },
+    "optional_hide_expression_field": {
+      "title": "Optional Field with Hide Expression",
+      "type": "string",
+      "minLength": 3,
+      "widget": {
+        "formlyConfig": {
+          "expressions": {
+            "hide": "!field.parent.model.required"
+          },
+          "props": {
+            "doNotSubmitOnEnter": true
+          }
+        }
+      }
+    },
     "enum": {
       "title": "List of values",
       "type": "string",

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
@@ -767,7 +767,8 @@ export class EditorComponent extends AbstractCanDeactivateComponent implements O
     }
     return (
       !field.props.required &&
-      !field.hide
+      !field.hide &&
+      !('hide' in field?.expressions)
     );
   }
 

diff --git a/projects/rero/ng-core/src/lib/record/editor/extensions.ts b/projects/rero/ng-core/src/lib/record/editor/extensions.ts
@@ -219,6 +219,8 @@ export class NgCoreFormlyExtension {
       // ignore array item which as key of the form "0"
       // TODO: find a better way to identify this case
       || !isNaN(Number(field.key))
+      // ignore field that has hide expression
+      || ('hide' in field?.expressions)
       // do not hide a field containing a 'hide' wrapper
       || this._hasHideWrapper(field)
       // do not hide a field that has a parent marked as hidden and a model is empty

diff --git a/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts b/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts
@@ -153,8 +153,6 @@ export class AddFieldEditorComponent implements OnInit {
    * @param match - TypeaheadMath, the selected element
    */
   showSelectedField(field: any) {
-    // show the field in the form
-    field.hide = false;
     // reset the input value
     this.value = undefined;
     // remove the the element from the list of hidden fields
@@ -164,6 +162,8 @@ export class AddFieldEditorComponent implements OnInit {
     // See: https://blog.angular-university.io/angular-debugging/
     // wait that the component is present in the DOM
     setTimeout(() => this.editorComponentInstance.setFieldFocus(field, true));
+    // show the field in the form
+    field.hide = false;
   }
 
   /**