Add basic wiring from types form

app/assets/stylesheets/content/_types_form_configuration.sass

@@ -76,7 +76,8 @@
   padding-left: 2px
   color: lighten($body-font-color, 10%)
 
-#type-form-conf-group-template
+#type-form-conf-group-template,
+#type-form-conf-query-template
   display: none
 
 .group-head,
@@ -89,3 +90,10 @@
   .attribute-name,
   .group-name
     flex-basis: 90%
+
+
+// Query group styles
+.type-form-query
+  padding: 10px
+  cursor: pointer
+  color: white

app/views/types/form/_form_configuration.html.erb

@@ -86,6 +86,10 @@ See docs/COPYRIGHT.rdoc for more details.
               <%= op_icon('button--icon icon-add') %>
               <span class="button--text"><%= t('types.edit.add_group') %></span>
             </button>
+            <button type="button" class="form-configuration--add-group button -alt-highlight" ng-click="addQuery($event)">
+              <%= op_icon('button--icon icon-add') %>
+              <span class="button--text"><%= t('types.edit.add_query') %></span>
+            </button>
           <% else %>
             <button type="button" class="form-configuration--add-group button -alt-highlight" ng-click="showEEOnlyHint()">
               <%= op_icon('button--icon icon-add') %>
@@ -113,6 +117,29 @@ See docs/COPYRIGHT.rdoc for more details.
           <div class="attributes" dragula='"attributes"'>
           </div>
         </div>
+        <div id="type-form-conf-query-template"
+             class="type-form-conf-group type-form-query-group"
+             data-original-key=""
+             data-key=""
+             data-key-is-symbol="false">
+          <div class="group-head">
+            <span class="group-handle icon-toggle"></span>
+            <group-edit-in-place
+              name=""
+              key=""
+              onvaluechange="groupNameChange"
+              onupsale="<%= EnterpriseToken.allows_to?(:edit_attribute_groups) ? '' : 'showEEOnlyHint' %>"
+              class="group-name">
+            </group-edit-in-place>
+            <span class="delete-group icon-small icon-close" ng-click="deleteGroup($event)"></span>
+          </div>
+          <div class="type-form-query" data-query="">
+            <span ng-click="editQuery($event)">
+              <%= op_icon('button--icon icon-add') %>
+              <%= t('types.edit.edit_query') %>
+            </span>
+          </div>
+        </div>
         <div id="draggable-groups" dragula='"groups"'>
           <% form_attributes[:actives].each do |group, attributes| %>
             <div class="type-form-conf-group" data-original-key="<%= group.key.to_s %>" data-key="<%= group.key %>" data-key-is-symbol="<%= group.key.is_a? Symbol %>">

config/locales/en.yml

@@ -199,6 +199,8 @@ en:
       projects: "Projects"
       enabled_projects: "Enabled projects"
       add_group: "Add group"
+      add_query: "Add new query group"
+      edit_query: "Edit embedded query"
       reset: "Reset to defaults"
 
   versions:

frontend/app/components/types/form-configuration/types-form-configuration.controller.ts

@@ -28,6 +28,7 @@ import { ConfirmDialogService } from './../../modals/confirm-dialog/confirm-dial
 //++
 
 import {openprojectModule} from '../../../angular-modules';
+import {ExternalQueryConfigurationService} from "core-components/wp-table/external-configuration/external-query-configuration.service";
 const autoScroll:any = require('dom-autoscroller');
 
 function typesFormConfigurationCtrl(
@@ -37,6 +38,7 @@ function typesFormConfigurationCtrl(
   $scope:any,
   $element:any,
   confirmDialog:ConfirmDialogService,
+  externalQueryConfiguration:ExternalQueryConfigurationService,
   $window:ng.IWindowService,
   $compile:any,
   $timeout:ng.ITimeoutService) {
@@ -114,6 +116,30 @@ function typesFormConfigurationCtrl(
     $compile(newGroup)($scope);
   };
 
+  $scope.addQuery = (event:any) => {
+    let newGroup:JQuery = angular.element('#type-form-conf-query-template').clone();
+
+    let draggableGroups:JQuery = angular.element('#draggable-groups');
+    let randomId:string = Math.ceil(Math.random() * 10000000).toString();
+
+    // Remove the id of the template:
+    newGroup.attr('id', null);
+    // Every group needs a key and an original-key:
+    newGroup.attr('data-key', randomId);
+    newGroup.attr('data-original-key', randomId);
+    angular.element('group-edit-in-place', newGroup).attr('key', randomId);
+
+    draggableGroups.prepend(newGroup);
+    $compile(newGroup)($scope);
+  };
+
+  $scope.editQuery = (event:JQueryEventObject) => {
+    const originator = jQuery(event.target).closest('.type-form-query');
+    const currentQuery = originator.data('query') || {};
+
+    externalQueryConfiguration.show(originator, currentQuery);
+  };
+
   $scope.updateHiddenFields = ():void => {
     let groups:HTMLElement[] = angular.element('.type-form-conf-group').not('#type-form-conf-group-template').toArray();
     let seenGroupNames:{[name:string]:boolean} = {};

frontend/app/components/wp-table/external-configuration/external-query-configuration.service.ts

@@ -57,7 +57,7 @@ export class ExternalQueryConfigurationService {
   /**
    * Open a Modal reference and append it to the portal
    */
-  public show<T extends OpModalComponent>(originator:JQuery, currentQuery:any):void {
+  public show(originator:JQuery, currentQuery:any):void {
     this.detach();
 
     // Create a portal for the given component class and render it