-
-
Notifications
You must be signed in to change notification settings - Fork 806
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21194 from kurund/grid-display-layout
add grid layout support for searchkit
- Loading branch information
Showing
9 changed files
with
182 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
(function(angular, $, _) { | ||
"use strict"; | ||
|
||
angular.module('crmSearchAdmin').component('searchAdminDisplayGrid', { | ||
bindings: { | ||
display: '<', | ||
apiEntity: '<', | ||
apiParams: '<' | ||
}, | ||
require: { | ||
parent: '^crmSearchAdminDisplay' | ||
}, | ||
templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayGrid.html', | ||
controller: function($scope) { | ||
var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), | ||
ctrl = this; | ||
|
||
this.$onInit = function () { | ||
if (!ctrl.display.settings) { | ||
ctrl.display.settings = { | ||
colno: '3', | ||
limit: CRM.crmSearchAdmin.defaultPagerSize, | ||
pager: {} | ||
}; | ||
} | ||
ctrl.parent.initColumns({}); | ||
}; | ||
|
||
} | ||
}); | ||
|
||
})(angular, CRM.$, CRM._); |
46 changes: 46 additions & 0 deletions
46
ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset> | ||
<fieldset> | ||
<div class="form-inline"> | ||
<label for="crm-search-admin-display-colno">{{:: ts('Layout') }}</label> | ||
<select id="crm-search-admin-display-colno" class="form-control" ng-model="$ctrl.display.settings.colno"> | ||
<option value="2">{{:: ts('2 x 2') }}</option> | ||
<option value="3">{{:: ts('3 x 3') }}</option> | ||
<option value="4">{{:: ts('4 x 4') }}</option> | ||
<option value="5">{{:: ts('5 x 5') }}</option> | ||
</select> | ||
<div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div> | ||
</div> | ||
<search-admin-pager-config display="$ctrl.display"></search-admin-pager-config> | ||
</fieldset> | ||
<fieldset class="crm-search-admin-edit-columns-wrapper"> | ||
<legend> | ||
{{:: ts('Fields') }} | ||
<div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div> | ||
</legend> | ||
<div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions"> | ||
<fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable"> | ||
<legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend> | ||
<div class="form-inline" title="{{ ts('Should this item display on its own line or inline with other items?') }}"> | ||
<label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label> | ||
<button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}"> | ||
<i class="crm-i fa-ban"></i> | ||
</button> | ||
</div> | ||
<div class="form-inline crm-search-admin-flex-row"> | ||
<label> | ||
<input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getColLabel(col)" > | ||
{{:: ts('Label') }} | ||
</label> | ||
<input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}"> | ||
<crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":label"></crm-search-admin-token-select> | ||
</div> | ||
<div class="form-inline" ng-if="col.label"> | ||
<label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width--> | ||
<div class="checkbox"> | ||
<label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label> | ||
</div> | ||
</div> | ||
<div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div> | ||
</fieldset> | ||
</div> | ||
</fieldset> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<?php | ||
// Module for rendering List Search Displays. | ||
return [ | ||
'js' => [ | ||
'ang/crmSearchDisplayGrid.module.js', | ||
'ang/crmSearchDisplayGrid/*.js', | ||
], | ||
'partials' => [ | ||
'ang/crmSearchDisplayGrid', | ||
], | ||
'basePages' => ['civicrm/search', 'civicrm/admin/search'], | ||
'requires' => ['crmSearchDisplay', 'crmUi', 'ui.bootstrap'], | ||
'bundles' => ['bootstrap3'], | ||
'exports' => [ | ||
'crm-search-display-grid' => 'E', | ||
], | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
(function(angular, $, _) { | ||
"use strict"; | ||
|
||
// Declare module | ||
angular.module('crmSearchDisplayGrid', CRM.angRequires('crmSearchDisplayGrid')); | ||
|
||
})(angular, CRM.$, CRM._); |
29 changes: 29 additions & 0 deletions
29
ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
(function(angular, $, _) { | ||
"use strict"; | ||
|
||
angular.module('crmSearchDisplayGrid').component('crmSearchDisplayGrid', { | ||
bindings: { | ||
apiEntity: '@', | ||
search: '<', | ||
display: '<', | ||
apiParams: '<', | ||
settings: '<', | ||
filters: '<' | ||
}, | ||
require: { | ||
afFieldset: '?^^afFieldset' | ||
}, | ||
templateUrl: '~/crmSearchDisplayGrid/crmSearchDisplayGrid.html', | ||
controller: function($scope, $element, searchDisplayBaseTrait) { | ||
var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), | ||
// Mix in properties of searchDisplayBaseTrait | ||
ctrl = angular.extend(this, searchDisplayBaseTrait); | ||
|
||
this.$onInit = function() { | ||
this.initializeDisplay($scope, $element); | ||
}; | ||
|
||
} | ||
}); | ||
|
||
})(angular, CRM.$, CRM._); |
8 changes: 8 additions & 0 deletions
8
ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<div class="crm-search-display crm-search-display-grid"> | ||
<div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div> | ||
<div | ||
class="crm-search-display-grid-container crm-search-display-grid-layout-{{$ctrl.settings.colno}}" | ||
ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGridItems.html'" | ||
></div> | ||
<div ng-include="'~/crmSearchDisplay/Pager.html'"></div> | ||
</div> |
8 changes: 8 additions & 0 deletions
8
ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<div ng-repeat="(rowIndex, row) in $ctrl.results"> | ||
<div ng-repeat="col in $ctrl.settings.columns" title="{{:: $ctrl.replaceTokens(col.title, row) }}" class="{{:: col.break ? '' : 'crm-inline-block' }}"> | ||
<label ng-if=":: col.label && (col.type !== 'field' || col.forceLabel || row[col.key])"> | ||
{{:: $ctrl.replaceTokens(col.label, row) }} | ||
</label> | ||
<span ng-include="'~/crmSearchDisplay/colType/' + col.type + '.html'"></span> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters