Added supprt of !group and $elemMatch (#147)

Author: ukrbublik

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+- 1.3.0
+  - Added support of `!group`
 - 1.2.0
   - Added `treeselect` and `treemultiselect` types
   - Changed format of `listValues` from `{<value>: <title>}` to `[{value, title}]` (old is supported). 

CONFIG.adoc

@@ -151,8 +151,9 @@ const myConfig = {
 [cols="1m,1,1,5a",options="header"]
 |===
 |key |required |default |meaning
-|type |+ | |One of types described in link:#configtypes[config.types] or `!struct` for complex field
-|subfields |+ for `!struct` type | |Config for subfields of complex field (multiple nesting is supported)
+|type |+ | |One of types described in link:#configtypes[config.types] or `!struct`/`!group` for complex field +
+ (`!group` can be used with https://docs.mongodb.com/manual/reference/operator/query/elemMatch/[elemMatch] in MongoDb)
+|subfields |+ for `!struct`/`!group` type | |Config for subfields of complex field (multiple nesting is supported)
 |label |+ | |Label to be displayed in field list +
   (If not specified, fields's key will be used instead)
 |label2 | | |Can be optionally specified for nested fields. +

css/compact_styles.scss

@@ -16,6 +16,9 @@
 .group {
   padding-left: 0px;
 }
+.rule_group {
+  padding-left: 5px;
+}
 
 .group--children {
   @extend %force_nomargin;
@@ -42,24 +45,62 @@
 }
 
 .group-or-rule-container {
-    margin-bottom: 5px;
-    padding-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-right: 5px;
+}
+.group--children {
+  margin-top: 5px !important;
+  margin-bottom: 5px !important;
+}
+.group--header,
+.group--footer {
+  margin: {
+    top: 5px !important;
+    bottom: 5px !important;
+  }
 }
 
 .rule--operator, .widget--widget, .widget--valuesrc, .widget--sep {
   margin-left: 5px;
 }
+
+.rule_group {
+  .group--actions {
+    margin-left: 5px;
+  }
+  .rule_group--children {
+    padding-left: 10px !important;
+    &.one--child {
+      padding-left: 5px !important;
+    }
+
+    & > .group-or-rule-container > .group-or-rule {
+      &::before, &::after {
+          left: -7px;
+          width: 7px;
+      }
+    }
+  }
+}
+
 .widget--valuesrc {
   margin-right: -3px;
 }
 .operator--options--sep {
   margin-right: 5px;
 }
 .group--header {
-  padding: 5px;
-  padding-left: 0;
+  padding: {
+    left: 0;
+    right: 5px;
+  }
+  margin: 0;
 }
 
+.group--drag-handler {
+  margin-left: 5px;
+}
 
 .rule--func--arg-value > .rule--widget {
   margin-left: -5px;

css/styles.scss

@@ -81,6 +81,11 @@ body.qb-dragging {
   position: relative;
 }
 
+.rule_group {
+  background: rgba(255, 252, 242, 0.5);
+  border: 1px solid #f9f1dd;
+}
+
 .qb-draggable {
   @extend %noselect;
   pointer-events: none;
@@ -93,11 +98,6 @@ body.qb-dragging {
     border: 1px dashed gray;
 }
 
-.group-or-rule-container {
-    margin-bottom: 10px;
-    padding-right: 10px;
-}
-
 /* slider */
 .ant-tooltip-inner {
   min-height: 18px;
@@ -141,7 +141,7 @@ ul.ant-select-selection__rendered {
 
      &::after {
         top: 50%;
-        border-width: 0 0 0 2px;    
+        border-width: 0 0 0 2px;
     }
 
     &::before, &::after {
@@ -159,6 +159,16 @@ ul.ant-select-selection__rendered {
   }
 
 
+  &.rule_group--children > .group-or-rule-container:first-child > .group-or-rule {
+      &::before {
+        display: none;
+      }
+      &::after {
+        border-radius: 4px 0 0 0;
+        border-width: 2 0 0 2px;
+      }
+  }
+
   & > .group-or-rule-container:first-child > .group-or-rule {
       &::before {
         top: -12px;
@@ -197,13 +207,12 @@ ul.ant-select-selection__rendered {
   cursor: grabbing;
 }
 
-.group--header,
-.group--footer {
-  padding: {
-    top: 10px;
-    right: 5px;
-    bottom: 10px;
-    left: 10px;
+.group--drag-handler {
+  margin-right: 8px;
+}
+.group--conjunctions {
+  .group--drag-handler {
+    margin-left: 10px;
   }
 }
 
@@ -240,8 +249,49 @@ ul.ant-select-selection__rendered {
 }
 
 
-.group--drag-handler {
-  margin-left: 8px;
+/******************************************************************************/
+/** RULE_GROUP *********************************************************************/
+/******************************************************************************/
+
+.rule_group {
+  display: flex;
+  padding-left: 10px;
+
+  .group--drag-handler {
+    align-self: center;
+  }
+  .group--field {
+    align-self: center;
+  }
+  .group--actions {
+    align-self: center;
+    flex: 0;
+  }
+
+  .rule_group--children {
+    flex: 1;
+
+    margin-top: 5px;
+    margin-bottom: 5px;
+    .group-or-rule-container {
+      margin-bottom: 5px;
+      margin-top: 5px;
+      padding-right: 5px;
+    }
+
+    padding-left: 18px;
+    &.one--child {
+      padding-left: 10px;
+    }
+
+    & > .group-or-rule-container > .group-or-rule {
+      &::before, &::after {
+          left: -10px;
+          width: 10px;
+          height: calc(50% + 8px);
+      }
+    }
+  }
 }
 
 /******************************************************************************/
@@ -267,7 +317,7 @@ ul.ant-select-selection__rendered {
   margin-right: 8px;
 }
 
-.rule--field, .rule--operator, .rule--value, .rule--operator-options, .rule--widget, 
+.rule--field, .group--field, .rule--operator, .rule--value, .rule--operator-options, .rule--widget, 
 .widget--widget, .widget--valuesrc, .widget--sep, .operator--options--sep,
 .rule--before-widget, .rule--after-widget {
   display: inline-block;
@@ -289,7 +339,7 @@ div.tooltip-inner {
   max-width: 500px;
 }
 
-.rule--field, .rule--operator, .widget--widget {
+.rule--field, .group--field, .rule--operator, .widget--widget {
   label {
     display: block;
     font-weight: bold;
@@ -391,7 +441,9 @@ div.tooltip-inner {
     transition: opacity 0.2s;
   }
   .group--header:hover .group--header,
-  .group--header:not(:hover) {
+  .group--header:not(:hover),
+  .rule_group:hover .rule_group,
+  .rule_group:not(:hover) {
     #{$what} {
       opacity: 0;
     }
@@ -403,7 +455,9 @@ div.tooltip-inner {
     transition: padding 0.2s;
   }
   .group--header:hover .group--header,
-  .group--header:not(:hover) {
+  .group--header:not(:hover),
+  .rule_group:hover .rule_group,
+  .rule_group:not(:hover) {
     #{$inactive} {
       width: 0;
       padding: 0;
@@ -457,3 +511,37 @@ $rule_actions: ".widget--valuesrc", ".rule--drag-handler", ".rule--header";
     @include force_not_display($inactive_conjs);
   }
 }
+
+
+
+/******************************************************************************/
+/** Vertical padding ****************************************************************/
+/******************************************************************************/
+
+
+.group--header,
+.group--footer {
+  padding: {
+    left: 10px;
+    right: 5px;
+  }
+  margin: {
+    top: 10px;
+    bottom: 10px;
+  }
+}
+.group-or-rule-container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-right: 10px;
+  &:first-child {
+    margin-top: 0px !important;
+  }
+  &:last-child {
+    margin-bottom: 0px !important;
+  }
+}
+.group--children {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

examples/demo/config.tsx

@@ -223,6 +223,25 @@ const fields: Fields = {
             }
         }
     },
+    results: {
+        label: 'Results',
+        type: '!group',
+        subfields: {
+            product: {
+                type: 'select',
+                listValues: ['abc', 'def', 'xyz'],
+                valueSources: ['value'],
+            },
+            score: {
+                type: 'number',
+                fieldSettings: {
+                    min: 0,
+                    max: 100
+                },
+                valueSources: ['value'],
+            }
+        }
+    },
     prox1: {
         label: 'prox',
         tooltip: 'Proximity search',

examples/demo/init_value.js

@@ -58,6 +58,47 @@ export default
           "number"
         ]
       }
+    },
+    "aaab8999-cdef-4012-b456-71702cd50090": {
+      "type": "rule_group",
+      "properties": {
+        "conjunction": "AND",
+        "field": "results"
+      },
+      "children1": {
+        "99b8a8a8-89ab-4cde-b012-31702cd5078b": {
+          "type": "rule",
+          "properties": {
+            "field": "results.product",
+            "operator": "select_equals",
+            "value": [
+              "abc"
+            ],
+            "valueSrc": [
+              "value"
+            ],
+            "valueType": [
+              "select"
+            ]
+          }
+        },
+        "88b9bb89-4567-489a-bcde-f1702cd53266": {
+          "type": "rule",
+          "properties": {
+            "field": "results.score",
+            "operator": "greater",
+            "value": [
+              8
+            ],
+            "valueSrc": [
+              "value"
+            ],
+            "valueType": [
+              "number"
+            ]
+          }
+        }
+      }
     }
   },
   "properties": {