fix review points #2

adobe · Nov 19, 2024 · 005945e · 005945e
1 parent 067b48a
commit 005945e
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 63 deletions.
diff --git a/...in/java/com/adobe/cq/forms/core/components/internal/servlets/ReviewDataSourceServlet.java b/...in/java/com/adobe/cq/forms/core/components/internal/servlets/ReviewDataSourceServlet.java
@@ -1,5 +1,5 @@
 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- ~ Copyright 2023 Adobe
+ ~ Copyright 2024 Adobe
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
@@ -83,8 +83,8 @@ protected void doGet(@NotNull SlingHttpServletRequest request, @NotNull SlingHtt
             Resource formInstance = ComponentUtils.getFormContainer(componentInstance);
             if (formInstance != null) {
                 FormContainer formContainer = formInstance.adaptTo(FormContainer.class);
-                List<Base> panelList = (List<Base>) getMultipleChildPanels(formContainer);
-                List<Base> panels = panelList.stream().filter(x -> "panel".equals(x.getFieldType())).collect(Collectors.toList());
+                List<Base> panels = ((List<Base>) getMultipleChildPanels(formContainer))
+                    .stream().filter(x -> "panel".equals(x.getFieldType())).collect(Collectors.toList());
                 for (Base panel : panels) {
                     String name = panel != null ? panel.getName() : "";
                     String title = "";

diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Review.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Review.java
@@ -22,22 +22,22 @@
 /**
  * Defines the {@code Review} Sling Model used for the {@code /apps/core/fd/components/form/review} component.
  *
- * @since com.adobe.cq.forms.core.components.models 5.9.5
+ * @since com.adobe.cq.forms.core.components.models 5.9.6
  */
 @ConsumerType
 public interface Review extends Base {
 
     /**
      * @return an array of linked panels to be reviewed on the review page. Each linked panel is the name of a panel that is linked to the
      *         review page.
-     * @since com.adobe.cq.forms.core.components.models.form 5.9.5
+     * @since com.adobe.cq.forms.core.components.models.form 5.9.6
      */
     @JsonIgnore
     String[] getLinkedPanels();
 
     /**
      * @return the edit mode action, which indicates whether edit button is visible on the review page at field, panel, both, or none
-     * @since com.adobe.cq.forms.core.components.models.form 5.9.5
+     * @since com.adobe.cq.forms.core.components.models.form 5.9.6
      */
     @JsonIgnore
     String getEditModeAction();

diff --git a/...c/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/README.md b/...c/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/README.md
@@ -44,16 +44,16 @@ JavaScript handling for dialog interaction. It is already included by its edit d
 ```
 BLOCK cmp-adaptiveform-review
     ELEMENT cmp-adaptiveform-review__container
-      ELEMENT cmp-adaptiveform-review__panel
-      MODIFIER cmp-adaptiveform-review__panel--repeatable
-        ELEMENT cmp-adaptiveform-review__label-containe
-          ELEMENT cmp-adaptiveform-review__label
-          ELEMENT cmp-adaptiveform-review__edit-button
-        ELEMENT cmp-adaptiveform-review__value
-      ELEMENT cmp-adaptiveform-review__field
-        ELEMENT cmp-adaptiveform-review__label
-        ELEMENT cmp-adaptiveform-review__value
-        ELEMENT cmp-adaptiveform-review__edit-button
-      ELEMENT cmp-adaptiveform-review__text
-        ELEMENT cmp-adaptiveform-review__label
+        ELEMENT cmp-adaptiveform-review__panel
+            MODIFIER cmp-adaptiveform-review__panel--repeatable
+                ELEMENT cmp-adaptiveform-review__label-container
+                    ELEMENT cmp-adaptiveform-review__label
+                    ELEMENT cmp-adaptiveform-review__edit-button
+                ELEMENT cmp-adaptiveform-review__value
+        ELEMENT cmp-adaptiveform-review__field
+            ELEMENT cmp-adaptiveform-review__label
+            ELEMENT cmp-adaptiveform-review__value
+            ELEMENT cmp-adaptiveform-review__edit-button
+        ELEMENT cmp-adaptiveform-review__text
+            ELEMENT cmp-adaptiveform-review__label
 ```
diff --git a/...t/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js b/...t/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js
@@ -30,11 +30,22 @@
     static bemBlock = 'cmp-adaptiveform-review';
     static templateAttribute = 'data-cmp-review';
     static DATA_ATTRIBUTE_VISIBLE = 'data-cmp-visible';
-    static hideFieldFromReview = ['button', 'plain-text', 'captcha', 'image'];
+    static FIELD_TYPE = FormView.Constants.FIELD_TYPE;
+    static HIDE_FIELD_FROM_REVIEW = [Review.FIELD_TYPE.BUTTON, Review.FIELD_TYPE.PLAIN_TEXT, Review.FIELD_TYPE.CAPTCHA, Review.FIELD_TYPE.IMAGE];
+    static panelModifier = '__panel--repeatable';
+    static fieldModifier = '__field--';
     static selectors = {
       self: "[data-" + this.NS + '-is="' + this.IS + '"]',
       container: `.${Review.bemBlock}__container`,
-      templates: "template[data-cmp-review-fieldType]"
+      templates: "template[data-cmp-review-fieldType]",
+      label: '[' + Review.templateAttribute + '-label]',
+      value: '[' + Review.templateAttribute + '-value]',
+      editButton:'[' + Review.templateAttribute + '-editButton]',
+      fieldId: Review.templateAttribute + '-fieldId',
+      fieldType: Review.templateAttribute + '-fieldType',
+      panelContent:'[' + Review.templateAttribute + '-content]',
+      labelContainer: `.${Review.bemBlock}__label-container`,
+      intersection: Review.templateAttribute + "-intersection="
     };
     static intersectionOptions = {
       root: null,
@@ -63,27 +74,27 @@
     }
 
     static addClassModifier(element, item) {
-      if(item.fieldType !== 'panel'){
-        element.querySelector('div').classList.add(Review.bemBlock + `__field--${item.fieldType}`);
+      if(item.fieldType !== Review.FIELD_TYPE.PANEL){
+        element.querySelector('div').classList.add(Review.bemBlock + Review.fieldModifier + item.fieldType);
       }
       if(item.repeatable){
-        element.querySelector('div').classList.add(Review.bemBlock + `__panel--repeatable`);
+        element.querySelector('div').classList.add(Review.bemBlock + Review.panelModifier);
       }
       if(item.name){
         element.querySelector('div').classList.add(item.name);
       }
     }
 
     static renderLabel(element, item) {
-      const label = element.querySelector('[' + Review.templateAttribute + '-label]');
-      label.innerHTML = item.fieldType === 'plain-text' ? Review.sanitizedValue(item.value) : Review.sanitizedValue(item?.label?.value, {ALLOWED_TAGS: [] });
+      const label = element.querySelector(Review.selectors.label);
+      label.innerHTML = item.fieldType === Review.FIELD_TYPE.PLAIN_TEXT ? Review.sanitizedValue(item.value) : Review.sanitizedValue(item?.label?.value, {ALLOWED_TAGS: [] });
       if (item.required) {
         label.setAttribute('data-cmp-required', item.required);
       }
     }
 
     static renderValue(element, item) {
-      const value = element.querySelector('[' + Review.templateAttribute + '-value]');
+      const value = element.querySelector(Review.selectors.value);
       if (value) {
         const plainText = Review.getValue(item, item.value) || '';
         value.innerHTML = Review.sanitizedValue(plainText);
@@ -92,9 +103,9 @@
 
     static addAccessibilityAttributes(element, item) {
       const container = element.querySelector('div');
-      const label = element.querySelector('[' + Review.templateAttribute + '-label]');
-      const value = element.querySelector('[' + Review.templateAttribute + '-value]');
-      const editButton = element.querySelector('[' + Review.templateAttribute + '-editButton]');
+      const label = element.querySelector(Review.selectors.label);
+      const value = element.querySelector(Review.selectors.value);
+      const editButton = element.querySelector(Review.selectors.editButton);
       const id = `${item.id}-review-label`;
       if(label){
         label.setAttribute('id', id);
@@ -110,15 +121,15 @@
     }
 
     static isRepeatable(item) {
-      return item.fieldType === 'panel' && item.type === 'array'
+      return item.fieldType === Review.FIELD_TYPE.PANEL && item.type === 'array'
     }
 
     /* return value of the field, if value is array then return comma separated string and 
       if value is file then return file name
     */
     static getValue(item, value) {
       if (value === undefined || value === null) return '';
-      if (item.fieldType === 'file-input') {
+      if (item.fieldType === Review.FIELD_TYPE.FILE_INPUT) {
         return Array.isArray(value) ? value.filter(file => file && file.name).map(file => file.name).join(', ') : (value.name || '');
       }
       if (Array.isArray(item.enumNames)) {
@@ -150,7 +161,7 @@
       return this.element.querySelectorAll(Review.selectors.templates);
     }
     getIntersectionElement() {
-      return this.element.querySelector("[" + Review.templateAttribute + "-intersection=" + this.id + "]");
+      return this.element.querySelector("[" + Review.selectors.intersection + this.id + "]");
     }
     getWidget() { return null }
     getDescription() { return null; }
@@ -181,7 +192,7 @@
       const templates = this.getTemplates();
       let mappings = {};
       templates.forEach(template => {
-        const type = template.getAttribute(Review.templateAttribute + '-fieldType');
+        const type = template.getAttribute(Review.selectors.fieldType);
         mappings[type || 'default'] = template;
       });
       this.templateMappings = mappings;
@@ -190,7 +201,7 @@
     // click handler to set focus on the field when use click on edit button
     #clickHandler(event) {
       if (event?.target?.nodeName === 'BUTTON') {
-        const id = event.target.getAttribute(Review.templateAttribute + '-fieldId');
+        const id = event.target.getAttribute(Review.selectors.fieldId);
         const form = this.formContainer.getModel();;
         const field = this.formContainer.getField(id);
         if (form && field) {
@@ -229,21 +240,21 @@
           Review.addClassModifier(cloneNode, item);
           Review.renderLabel(cloneNode, item);
           this.#renderEditButton(cloneNode, item);
-          if (item.fieldType === 'panel') {
+          if (item.fieldType === Review.FIELD_TYPE.PANEL) {
             const fields = this.#renderReviewFields(item.items);
             if (Review.hasChild(fields)) {
-              const labelContainer = cloneNode.querySelector(`.${Review.bemBlock}__label-container`);
+              const labelContainer = cloneNode.querySelector(Review.selectors.labelContainer);
               if(item?.label?.visible === false && labelContainer){
                 labelContainer.remove();
               }
               Review.addAccessibilityAttributes(cloneNode, item);
-              const contentElement = cloneNode.querySelector('[' + Review.templateAttribute + '-content]');
+              const contentElement = cloneNode.querySelector(Review.selectors.panelContent);
               if(contentElement){
                 contentElement.appendChild(fields);
               }
               currentFragment.appendChild(cloneNode);
             }
-          } else if (!Review.hideFieldFromReview.includes(item.fieldType) && !item[':type'].endsWith('review')) {
+          } else if (!Review.HIDE_FIELD_FROM_REVIEW.includes(item.fieldType) && !item[':type'].endsWith('review')) {
             Review.renderValue(cloneNode, item);
             Review.addAccessibilityAttributes(cloneNode, item);
             currentFragment.appendChild(cloneNode);
@@ -254,9 +265,9 @@
     }
 
     #getPanels() {
-      const linkedPanels = this._model?._jsonModel?.properties["fd:linkedPanels"] || [];
+      const linkedPanels = this.getModel().properties["fd:linkedPanels"] || [];
       if (linkedPanels.length) {
-        return this.#getLinkedPanels(linkedPanels);
+        return this.#getLinkedPanels([...linkedPanels]);
       }
       return this.#getAllPanels();
     }
@@ -294,21 +305,21 @@
 
     // render edit button of the field
     #renderEditButton(cloneNode, item) {
-      const editButton = cloneNode.querySelector('[' + Review.templateAttribute + '-editButton]');
+      const editButton = cloneNode.querySelector(Review.selectors.editButton);
       if (editButton) {
-        editButton.setAttribute(Review.templateAttribute + '-fieldId', item.id);
-        editButton.setAttribute('aria-label', "Edit " + item?.label?.value);
+        editButton.setAttribute(Review.selectors.fieldId, item.id);
+        editButton.setAttribute('aria-label', item?.label?.value);
         if (item.enabled === false) {
           editButton.setAttribute('disabled', true);
         }
         editButton.setAttribute(Review.DATA_ATTRIBUTE_VISIBLE, this.#isVisibleEditButton(item.fieldType));
       }
     }
     #isVisibleEditButton(fieldType) {
-      let editModeAction = this._model?._jsonModel?.properties?.['fd:editModeAction'];
+      let editModeAction = this.getModel().properties?.['fd:editModeAction'];
       if (editModeAction === 'both' ||
-        (editModeAction === 'panel' && fieldType === 'panel') ||
-        (editModeAction === 'field' && fieldType !== 'panel')) {
+        (editModeAction === Review.FIELD_TYPE.PANEL && fieldType === Review.FIELD_TYPE.PANEL) ||
+        (editModeAction === 'field' && fieldType !== Review.FIELD_TYPE.PANEL)) {
         return true;
       }
       return false;

diff --git a/ui.frontend/package-lock.json b/ui.frontend/package-lock.json
diff --git a/ui.frontend/package.json b/ui.frontend/package.json
@@ -23,7 +23,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@aemforms/af-core": "^0.22.109",
+    "@aemforms/af-core": "^0.22.111",
     "@aemforms/af-formatters": "^0.22.109",
     "@aemforms/af-custom-functions": "1.0.10"
   }

diff --git a/ui.frontend/src/constants.js b/ui.frontend/src/constants.js
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ******************************************************************************/
+import { FIELD_TYPE } from "@aemforms/af-core";
 
 /**
  * @module FormView
@@ -365,6 +366,14 @@ export const Constants = {
      * Prefix path for all AF HTTP APIs.
      * @type {string}
      */
-    API_PATH_PREFIX : "/adobe/forms/af"
+    API_PATH_PREFIX : "/adobe/forms/af",
+
+    /**
+     * Field type object.
+     * @type {object}
+     * @memberof module:FormView~Constants
+     * @namespace FIELD_TYPE
+     */
+    FIELD_TYPE: FIELD_TYPE
 };