Added badge count for children in the Parents field and prevent loading Pages in Parents field if they don't have children

CHANGELOG.md

@@ -4,8 +4,10 @@
 1. [](#new)
     * Added `has-children` flag in parent field data response
     * Added `RESET` en lang string
+    * Added badge count for children in the Parents field 
 1. [](#bugfix)
     * Fixed parent field not working with regular pages
+    * Prevent loading Pages in Parents field if they don't have children
 
 # v1.10.0-rc.7
 ## 03/05/2020

themes/grav/app/forms/fields/parents.js

@@ -51,8 +51,10 @@ export class Parents {
         const frag = document.createDocumentFragment();
 
         const label = $(`<span title="${item[config.labelKey]}" />`);
+        const infoContainer = $('<span class="info-container" />');
         const iconPrepend = $('<i />');
         const iconAppend = $('<i />');
+        const badge = $('<span class="badge" />');
         const prependClasses = ['fa'];
         const appendClasses = ['fa'];
 
@@ -72,12 +74,15 @@ export class Parents {
         label.appendTo(frag);
 
         // append icon
-        if (item.children || item.type === 'dir') {
+        if (item.children || item['has-children']) {
             appendClasses.push('fa-caret-right');
+            badge.text(item.size || item.count || 0);
+            badge.appendTo(infoContainer);
         }
 
         iconAppend.addClass(appendClasses.join(' '));
-        iconAppend.appendTo(frag);
+        iconAppend.appendTo(infoContainer);
+        infoContainer.appendTo(frag);
 
         return frag;
     }
@@ -110,7 +115,7 @@ export class Parents {
             return callback(this.data);
         }
 
-        if (parent.type !== 'dir') {
+        if (parent.type !== 'dir' || !parent['has-children']) {
             return false;
         }
 

themes/grav/scss/template/modules/_finderjs.scss

@@ -52,6 +52,11 @@
         color: white;
     }
 
+    .info-container {
+        display: flex;
+        align-items: center;
+    }
+
     .fjs-list {
         list-style: none;
         margin: 0;