Skip to content

Commit

Permalink
Added model search
Browse files Browse the repository at this point in the history
  • Loading branch information
@zunnu
zunnu committed Oct 19, 2022
1 parent a5fbda8 commit 2369126
Show file tree
Hide file tree
Showing 5 changed files with 536 additions and 189 deletions.
39 changes: 32 additions & 7 deletions src/Controller/AssociationsController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,32 @@ public function index() {
$this->set('associationCollections', $associationsCollection);
$this->set('associationTypes', $this->Gate->associationTypes);
$this->set('activePlugins', $this->Gate->getPlugins());
$this->set('loadedModels', $this->Gate->getLoadedModels());
$this->set('showDeepChildren', $showDeepChildren);
$this->set('selectedTypes', $selectedTypes);

$selectedNode = 'Root';
if(!empty($data['targetPlugin'])) {
if(!empty($data['targetModel'])) {
$selectedNode = $data['targetPlugin'] . '-' . $data['targetModel'];
} else {
$selectedNode = $data['targetPlugin'];
}
}

$assocationSearchSelect = ['Root' => 'Root'];
foreach($associations as $plugin => $assocation) {
$keys = array_keys($assocation);
$first = true;

foreach($keys as $k) {
if($first) {
$first = false;
$assocationSearchSelect[$plugin][$plugin] = $plugin . ' (plugin)';
}

$assocationSearchSelect[$plugin][$plugin . '-' . $k] = $k;
}
}

$this->set(compact('assocationSearchSelect', 'showDeepChildren', 'selectedTypes', 'selectedNode'));

if($this->request->is('ajax')) {
$this->render('Element/associationTree');
Expand Down Expand Up @@ -118,8 +141,12 @@ private function _parseSearch($associations, $data) {
$data['targetModel'] => $associations[$data['targetPlugin']][$data['targetModel']]
]
];

$showDeepChildren = true;
}
} elseif(!empty($data['targetPlugin']) && empty($data['targetModel'])) {
if(!empty($associations[$data['targetPlugin']])) {
$associationsCollection = [
$data['targetPlugin'] => $associations[$data['targetPlugin']]
];
}
} elseif(!empty($data['plugin']) && !empty($data['currentModel'])) {
if(!empty($associations[$data['plugin']][$data['currentModel']])) {
Expand All @@ -128,8 +155,6 @@ private function _parseSearch($associations, $data) {
$data['currentModel'] => $associations[$data['plugin']][$data['currentModel']]
]
];

$showDeepChildren = true;
}
} elseif(!empty($data['plugin']) && empty($data['currentModel'])) {
if(!empty($associations[$data['plugin']])) {
Expand Down
117 changes: 86 additions & 31 deletions src/Template/Associations/index.ctp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,23 +94,50 @@
}

.btn-group .show {
width: 65%;
/*width: 65%;*/
}
</style>

<body>
<div class="container mb-4">
<div class="row">
<?= $this->Form->control('associationTypes', ['label' => 'Association types', 'required' => false, 'options' => $associationTypes, 'multiple' => true, 'default' => $selectedTypes, 'id' => 'associationTypes', 'class' => 'form-control', 'templates' => [
'inputContainer' => '<div class="form-group col-md-6 mt-4">{{content}}</div>'
]]); ?>


<div class="form-group col-md-4 mt-4 tooltip-container">
<span>Show deep children</span><button class="btn btn-info" data-toggle="tooltip" data-original-title="Turning this off will help with the performance but show less results">?</button>
<?= $this->Form->control('associationTypes', [
'label' => [
'text' => 'Association types',
'style' => 'display: block'
],
'required' => false,
'options' => $associationTypes,
'multiple' => true,
'default' => $selectedTypes,
'id' => 'associationTypes',
'class' => 'form-control',
'templates' => [
'inputContainer' => '<div class="form-group col-md-3 mt-4">{{content}}</div>'
]
]); ?>

<div class="form-group col-md-3 tooltip-container" style="padding-top: 3.3rem;">
<span>Show deep children <button class="btn btn-info" data-toggle="tooltip" data-original-title="Turning this off will help with the performance but show less results">?</button></span>
<input name="deepChildren" type="checkbox" hidden="hidden" id="deep-children" <?= $showDeepChildren ? 'checked' : '' ?>>
<label class="switch mt-2" for="deep-children"></label>
</div>

<?= $this->Form->control('search', [
'label' => [
'text' => 'Search',
'style' => 'display: block'
],
'required' => false,
'options' => $assocationSearchSelect,
'default' => $selectedNode,
'id' => 'general-search',
'multiple' => false,
'class' => 'form-control',
'templates' => [
'inputContainer' => '<div class="form-group col-md-3 mt-4">{{content}}</div>'
]
]); ?>
</div>
</div>

Expand All @@ -125,8 +152,36 @@
container: '.tooltip-container'
});

$("#plugins").multiselect({
// includeSelectAllOption: true
$('#general-search').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableFiltering: true,
filterBehavior: 'value',
enableFullValueFiltering: false,
maxHeight: 400,
onChange: function(option, checked, select) {
var value = option.val();
value = value.split('-');

// for root selection show all
if(value[0] == 'Root') {
value[0] = '';
value[1] = '';
}

var searchParam = {targetPlugin: value[0], targetModel: value[1]}
let buildParam = encodeURIComponent(JSON.stringify(searchParam))
var url = window.updateQueryStringParameter(window.location.href, 'search', buildParam);
history.replaceState(null, null, url);

var request = updateGridRequest(url);

request.done(function (data) {
// clear content from grid and add new content
$(document).find('#canvas').empty();
$(document).find('#canvas').html(data);
})
},
});

$("#associationTypes").multiselect({
Expand Down Expand Up @@ -155,32 +210,32 @@
}
}

$("#plugins").change(function () {
var params = {};
var str = "";
var url = "";
var select = $('#plugins');
// $("#plugins").change(function () {
// var params = {};
// var str = "";
// var url = "";
// var select = $('#plugins');

if (select.val() != '') {
var selected = select.val();
// if (select.val() != '') {
// var selected = select.val();

if (select.attr('multiple')) {
selected = selected.join(',');
}
// if (select.attr('multiple')) {
// selected = selected.join(',');
// }

}
// }

// refresh grid
url = window.updateQueryStringParameter(window.location.href, 'plugins', selected);
window.history.pushState("", "", url)
var request = updateGridRequest(url);
// // refresh grid
// url = window.updateQueryStringParameter(window.location.href, 'plugins', selected);
// window.history.pushState("", "", url)
// var request = updateGridRequest(url);

request.done(function (data) {
// clear content from grid and add new content
$(document).find('#canvas').empty();
$(document).find('#canvas').html(data);
})
});
// request.done(function (data) {
// // clear content from grid and add new content
// $(document).find('#canvas').empty();
// $(document).find('#canvas').html(data);
// })
// });

$("#associationTypes").change(function() {
var params = {};
Expand Down
18 changes: 17 additions & 1 deletion src/Template/Element/associationTree.ctp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,23 @@
var searchParam = {plugin: nodeInfo.plugin, currentModel: nodeInfo.model, targetModel: nodeInfo.associationTarget, targetPlugin: nodeInfo.associationTargetPlugin}
let buildParam = encodeURIComponent(JSON.stringify(searchParam))
var url = window.updateQueryStringParameter(window.location.href, 'search', buildParam);
window.history.pushState("", "", url)
history.replaceState(null, null, url);

var plugin = nodeInfo.associationTargetPlugin;
if(!plugin) {
plugin = nodeInfo.plugin;
}

var model = nodeInfo.associationTarget;
if(!model) {
model = nodeInfo.model;
}

if(!plugin) {
$('#general-search').multiselect('select', 'Root', true);
} else {
$('#general-search').multiselect('select', plugin + (model ? '-' + model : ''), true);
}
}
})
});
Expand Down
32 changes: 28 additions & 4 deletions webroot/css/bootstrap-multiselect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Bootstrap Multiselect (http:https://davidstutz.de/bootstrap-multiselect/)
*
* Apache License, Version 2.0:
* Copyright (c) 2012 - 2020 David Stutz
* Copyright (c) 2012 - 2022 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a
Expand All @@ -15,7 +15,7 @@
* under the License.
*
* BSD 3-Clause License:
* Copyright (c) 2012 - 2020 David Stutz
* Copyright (c) 2012 - 2022 David Stutz
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
Expand Down Expand Up @@ -59,6 +59,10 @@ span.multiselect-native-select select {
.multiselect.dropdown-toggle:after {
display: none;
}
.multiselect {
overflow: hidden;
text-overflow: ellipsis;
}
.multiselect-container {
position: absolute;
list-style-type: none;
Expand Down Expand Up @@ -88,8 +92,20 @@ span.multiselect-native-select select {
margin-left: -1.5rem;
display: none;
}
.multiselect-container .multiselect-option.multiselect-group-option-indented-full {
padding-left: 2.6rem;
}
.multiselect-container .multiselect-option.multiselect-group-option-indented {
padding-left: 1.75rem;
padding-left: 1.8rem;
}
.multiselect-container .multiselect-group {
cursor: pointer;
}
.multiselect-container .multiselect-group.closed .dropdown-toggle::after {
transform: rotate(-90deg);
}
.multiselect-container .multiselect-group .caret-container ~ .form-check {
margin-left: 0.5rem;
}
.multiselect-container .multiselect-option,
.multiselect-container .multiselect-group,
Expand Down Expand Up @@ -118,6 +134,14 @@ span.multiselect-native-select select {
background-color: lightgrey;
color: black;
}
.multiselect-container .multiselect-option:hover,
.multiselect-container .multiselect-group:hover,
.multiselect-container .multiselect-all:hover,
.multiselect-container .multiselect-option:focus,
.multiselect-container .multiselect-group:focus,
.multiselect-container .multiselect-all:focus {
background-color: darkgray !important;
}
.multiselect-container .multiselect-option .form-check,
.multiselect-container .multiselect-group .form-check,
.multiselect-container .multiselect-all .form-check {
Expand Down Expand Up @@ -152,4 +176,4 @@ span.multiselect-native-select select {
.input-group > .multiselect-native-select:not(:last-child) .multiselect {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
Loading

0 comments on commit 2369126

Please sign in to comment.