- <div ng-model="params.join" ui-sortable="{axis: 'y'}">
- <div class="api4-input form-inline" ng-repeat="item in params.join track by $index">
- <i class="crm-i fa-arrows"></i>
- <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" />
- <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
- <input class="form-control twenty" type="text" ng-model="params.join[$index][2]" />
- <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
- </div>
+ <div ng-model="params.join" ui-sortable="{axis: 'y', containment: '#api4-join-fieldset'}">
+ <fieldset ng-repeat="item in params.join track by $index">
+ <div class="api4-input form-inline">
+ <i class="crm-i fa-arrows"></i>
+ <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" ng-model-options="{updateOn: 'blur'}" ng-change="$ctrl.buildFieldList()"/>
+ <label>{{:: ts('Required:') }}</label>
+ <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
+ <label>{{:: ts('Using:') }}</label>
+ <select class="form-control" ng-model="params.join[$index][2]" ng-options="e.name as e.name for e in ::bridgeEntities" ng-change="$ctrl.buildFieldList()">
+ <option value="">{{:: ts('- none -') }}</option>
+ </select>
+ <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
+ </div>
+ <fieldset class="api4-clause-fieldset" crm-api4-clause="{skip: 3, clauses: params.join[$index], op: 'AND', label: 'On', fields: fieldsAndJoins, format: 'plain'}">
+ </fieldset>
+ </fieldset>