BUG Fix GridFieldAddExistingAutocompleter

This fix exchanges references to sub-components by ID with class references
Fixes #5382
This commit is contained in:
Damian Mooyman 2016-05-02 17:37:03 +12:00
parent 2a5ba397e6
commit 096f30ebe5
6 changed files with 115 additions and 106 deletions

View File

@ -20,8 +20,8 @@ Used in side panels and action tabs
.cms .ss-gridfield > div.ss-gridfield-buttonrow-after .action { margin-top: 12px; }
.cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms .ss-gridfield[data-selectable] td { cursor: pointer; }
.cms .ss-gridfield span button#action_gridfield_relationfind { display: none; }
.cms .ss-gridfield p button#action_export span.btn-icon-download-csv { height: 17px; }
.cms .ss-gridfield span button.action_gridfield_relationfind { display: none; }
.cms .ss-gridfield p button.action_export span.btn-icon-download-csv { height: 17px; }
.cms .ss-gridfield .right { float: right; }
.cms .ss-gridfield .right > * { float: right; margin-left: 8px; }
.cms .ss-gridfield .right .pagination-records-number { font-size: 1.0em; padding: 6px 3px 6px 0; color: white; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.2); font-weight: normal; }
@ -31,7 +31,7 @@ Used in side panels and action tabs
.cms .ss-gridfield .grid-levelup a.list-parent-link { background: transparent url(../images/gridfield-level-up.png) no-repeat 0 0; display: block; }
.cms .ss-gridfield .add-existing-autocompleter span { float: left; display: inline-block; vertical-align: top; *vertical-align: auto; *zoom: 1; *display: inline; }
.cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 270px; height: 32px; margin-bottom: 12px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cms .ss-gridfield .add-existing-autocompleter button#action_gridfield_relationadd { height: 32px; margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.cms .ss-gridfield .add-existing-autocompleter button.action_gridfield_relationadd { height: 32px; margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { margin-bottom: 0; font-size: 12px; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; }
.cms table.ss-gridfield-table { display: table; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; overflow: hidden; }
.cms table.ss-gridfield-table thead { color: #323e46; background: transparent; }
@ -90,7 +90,7 @@ Used in side panels and action tabs
.cms table.ss-gridfield-table tr th.extra select { margin: 0; }
.cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
.cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
.cms table.ss-gridfield-table tr th button#action_gridfield_relationadd:hover { color: #444 !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button.action_gridfield_relationadd:hover { color: #444 !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 2px 8px 2px 0; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.2); color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

View File

@ -96,21 +96,23 @@ class GridFieldAddExistingAutocompleter
$dataClass = $gridField->getList()->dataClass();
$forTemplate = new ArrayData(array());
$forTemplate->Fields = new ArrayList();
$forTemplate->Fields = new FieldList();
$searchField = new TextField('gridfield_relationsearch', _t('GridField.RelationSearch', "Relation search"));
$searchField->setAttribute('data-search-url', Controller::join_links($gridField->Link('search')));
$searchField->setAttribute('placeholder', $this->getPlaceholderText($dataClass));
$searchField->addExtraClass('relation-search no-change-track');
$searchField->addExtraClass('relation-search no-change-track action_gridfield_relationsearch');
$findAction = new GridField_FormAction($gridField, 'gridfield_relationfind',
_t('GridField.Find', "Find"), 'find', 'find');
$findAction->setAttribute('data-icon', 'relationfind');
$findAction->addExtraClass('action_gridfield_relationfind');
$addAction = new GridField_FormAction($gridField, 'gridfield_relationadd',
_t('GridField.LinkExisting', "Link Existing"), 'addto', 'addto');
$addAction->setAttribute('data-icon', 'chain--plus');
$addAction->addExtraClass('action_gridfield_relationadd');
// If an object is not found, disable the action
if(!is_int($gridField->State->GridFieldAddRelation(null))) {
@ -120,6 +122,9 @@ class GridFieldAddExistingAutocompleter
$forTemplate->Fields->push($searchField);
$forTemplate->Fields->push($findAction);
$forTemplate->Fields->push($addAction);
if($form = $gridField->getForm()) {
$forTemplate->Fields->setForm($form);
}
return array(
$this->targetFragment => $forTemplate->renderWith($this->itemClass)

View File

@ -51,7 +51,8 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
null
);
$button->setAttribute('data-icon', 'download-csv');
$button->addExtraClass('no-ajax');
$button->addExtraClass('no-ajax action_export');
$button->setForm($gridField->getForm());
return array(
$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
);
@ -116,10 +117,10 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
$fileData .= "\"" . implode("\"{$separator}\"", array_values($headers)) . "\"";
$fileData .= "\n";
}
//Remove GridFieldPaginator as we're going to export the entire list.
$gridField->getConfig()->removeComponentsByType('GridFieldPaginator');
$items = $gridField->getManipulatedList();
// @todo should GridFieldComponents change behaviour based on whether others are available in the config?

View File

@ -373,10 +373,13 @@
});
},
select: function(event, ui) {
$(this).closest(".ss-gridfield").find("#action_gridfield_relationfind").replaceWith(
'<input type="hidden" name="relationID" value="'+ui.item.id+'" id="relationID"/>'
);
var addbutton = $(this).closest(".ss-gridfield").find("#action_gridfield_relationadd");
var hiddenField = $('<input type="hidden" name="relationID" class="action_gridfield_relationfind" />');
hiddenField.val(ui.item.id);
$(this)
.closest(".ss-gridfield")
.find(".action_gridfield_relationfind")
.replaceWith(hiddenField);
var addbutton = $(this).closest(".ss-gridfield").find(".action_gridfield_relationadd");
if(addbutton.data('button')){
addbutton.button('enable');
}else{

View File

@ -15,14 +15,14 @@
@import "../admin/scss/_mixins";
@import "_elementMixins";
//$experimental-support-for-svg variable comes from
//imported compass/support file and enables svg gradients in IE9.
//This is needed for the background gradients to work as desired with
//multiple images.
$experimental-support-for-svg: true;
//$experimental-support-for-svg variable comes from
//imported compass/support file and enables svg gradients in IE9.
//This is needed for the background gradients to work as desired with
//multiple images.
$experimental-support-for-svg: true;
$gf_colour_gradient_dark: darken($color-base, 8%);
$gf_colour_gradient_dark: darken($color-base, 8%);
$gf_colour_header_border: $gf_colour_gradient_dark;
$gf_colour_subheader: saturate(lighten($color-base, 15%),5%);
$gf_colour_border: rgba(0,0,0,.1);
@ -70,11 +70,11 @@ $gf_grid_x: 16px;
}
}
span button#action_gridfield_relationfind {
span button.action_gridfield_relationfind {
display:none; //hides find button - redundant functionality
}
p button#action_export {
p button.action_export {
span.btn-icon-download-csv {
height:17px; //exact height of icon
}
@ -83,7 +83,7 @@ $gf_grid_x: 16px;
float:right;
& > * {
float: right;
margin-left:$gf_grid_x/2;
margin-left:$gf_grid_x/2;
}
.pagination-records-number {
@ -94,7 +94,7 @@ $gf_grid_x: 16px;
font-weight: normal;
}
}
.left {
.left {
float:left;
& > * {
margin-right:$gf_grid_x/2;
@ -102,7 +102,7 @@ $gf_grid_x: 16px;
}
}
}
.ss-gridfield {
.grid-levelup {
text-indent: -9999em;
@ -114,7 +114,7 @@ $gf_grid_x: 16px;
}
.add-existing-autocompleter {
span {
float: left;
float: left;
@include inline-block(top);
}
input.relation-search {
@ -123,7 +123,7 @@ $gf_grid_x: 16px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button#action_gridfield_relationadd {
button.action_gridfield_relationadd {
height: 32px;
margin-left: 0; // Webkit needs this
border-top-left-radius: 0;
@ -138,16 +138,16 @@ $gf_grid_x: 16px;
}
}
table.ss-gridfield-table {
display: table;
@include box-shadow-none;
display: table;
@include box-shadow-none;
padding: 0;
border-collapse: separate;
border-bottom: 0 none;
border-collapse: separate;
border-bottom: 0 none;
width: 100%;
overflow: hidden;
thead {
color: darken($color-base, 50%);
color: darken($color-base, 50%);
background: transparent;
tr.filter-header {
.fieldgroup {
@ -164,9 +164,9 @@ $gf_grid_x: 16px;
th:last-child {
@include border-top-right-radius($gf_border_radius);
}
}
}
}
tbody {
background: #FFF;
tr {
@ -180,7 +180,7 @@ $gf_grid_x: 16px;
word-wrap:break-word;
// Give browser some hints on which cols take priority:
// The last column (buttons) should always shrink to fit.
// Overwritten for IE7, which doesnt support this.
// Overwritten for IE7, which doesnt support this.
&.col-buttons {
width: 1px;
padding:0 $gf_grid_x/2;
@ -214,31 +214,31 @@ $gf_grid_x: 16px;
margin-top: -1px;
@include border-radius(2px, 2px);
}
span.badge.status-modified {
color: #7E7470;
border: 1px solid #C9B800;
background-color: #FFF0BC;
}
span.badge.status-addedtodraft {
color: #7E7470;
border: 1px solid #C9B800;
background-color: #FFF0BC;
}
span.badge.status-deletedonlive {
color: #636363;
border: 1px solid #E49393;
background-color: #F2DADB;
}
span.badge.status-removedfromdraft {
color: #636363;
border: 1px solid #E49393;
background-color: #F2DADB;
}
span.badge.status-workflow-approval {
color: #56660C;
border: 1px solid #7C8816;
@ -296,11 +296,11 @@ $gf_grid_x: 16px;
}
}
}
tr {
tr {
&.title {
th {
position: relative;
position: relative;
background: $gf_colour_gradient_dark;
border-bottom: 1px solid darken($gf_colour_gradient_dark,5%);
padding: 5px;
@ -314,19 +314,19 @@ $gf_grid_x: 16px;
margin: 1px 8px 0;
display:inline-block;
float:left;
}
}
}
}
&.sortable-header {
background: $gf_colour_subheader;
}
&.sortable-header {
background: $gf_colour_subheader;
th{
padding: 0; // Should be padding: 0 1em; like td
font-weight: normal;
.ss-ui-button {
font-weight: normal;
}
}
}
}
}
&:hover {
background: #FFFAD6;
}
@ -354,15 +354,15 @@ $gf_grid_x: 16px;
background: #FFFAD6;
}
}
th {
font-weight: bold;
font-size: $gf_grid_y;
color: #FFF;
padding: 5px;
border-right: 1px solid $gf_colour_border;
div {
div {
&.fieldgroup,&.fieldgroup-field {
width: 100%;
position:relative;
@ -407,8 +407,8 @@ $gf_grid_x: 16px;
&.extra {
position:relative;
background:darken($color-dark-grey, 10%);
background: rgba(#000, 0.7);
padding: 5px;
background: rgba(#000, 0.7);
padding: 5px;
border-top: $gf_colour_text_shadow;
input {
@ -418,10 +418,10 @@ $gf_grid_x: 16px;
button.ss-ui-button {
padding: .3em;
line-height: 1;
@include box-shadow-none;
@include box-shadow-none;
position: relative;
border-bottom-width: 0;
@include border-radius(2px, 2px);
border-bottom-width: 0;
@include border-radius(2px, 2px);
}
select {
@ -436,21 +436,21 @@ $gf_grid_x: 16px;
}
button {
&#action_gridfield_relationadd:hover {
&.action_gridfield_relationadd:hover {
color: #444 !important; /* Not sure why IE think it needs this */
}
&:hover {
color: #ccc !important; /* Not sure why IE think it needs this */
color: #ccc !important; /* Not sure why IE think it needs this */
}
&.ss-gridfield-sort:hover {
color: #fff !important;
@include box-shadow-none;
@include box-shadow-none;
}
&.ss-gridfield-sort {
background: transparent url(../images/arrows.png) no-repeat right 6px;
border:none;
border:none;
width:100%;
text-align: left;
padding: 2px 8px 2px 0; // Doesn't need to be so big now that filter has moved
@ -476,26 +476,26 @@ $gf_grid_x: 16px;
@include background(
$bgImage -15px 4px,
linear-gradient(
$color-menu-button,
$color-menu-button,
darken($color-menu-button, 10%)
)
);
width: 26px;
border-top: 1px solid lighten($color-menu-button, 5%);
);
width: 26px;
border-top: 1px solid lighten($color-menu-button, 5%);
&.hover-alike:active, &:active, &.hover-alike, &:hover {
&.hover-alike:active, &:active, &.hover-alike, &:hover {
@include background (
$bgImage -15px 4px,
linear-gradient(
lighten($color-menu-button, 10%),
$color-menu-button
));
}
$color-menu-button
));
}
&.trigger{ //The magnifying glass before filter is opened
margin-left: $gf_grid_y;
border:none;
@include background ($bgImage -17px 6px);
&.trigger{ //The magnifying glass before filter is opened
margin-left: $gf_grid_y;
border:none;
@include background ($bgImage -17px 6px);
padding-right: 46px;
margin: 0 $gf_grid_y/2;
@ -505,68 +505,68 @@ $gf_grid_x: 16px;
width:10px;
left:30px;
top:40%;
background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px;
background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px;
}
&:hover{
@include background ($bgImage -17px -38px);
@include background ($bgImage -17px -38px);
@include box-shadow-none;
span{//dropdown arrow
opacity:0.9;
}
}
}
}
}
&.ss-gridfield-button-close{
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
@include background ($bgImage 8px -17px);
@include gridFieldButtons;
width:25px;
@include background ($bgImage 8px -17px);
@include gridFieldButtons;
width:25px;
opacity:0.8;
margin-right:-5px; //For IE
margin-right:-5px; //For IE
&.hover-alike:active, &:active, &.hover-alike, &:hover {
opacity:1;
@include background (
$bgImage 8px -17px,
linear-gradient(
rgba(#fff,0.1),
rgba(#fff,0.1)
)
rgba(#fff,0.1)
)
);
}
}
}
&.ss-gridfield-button-reset{
@include gridFieldButtons;
@include gridFieldButtons;
position:absolute;
top: -21px;
right: -1px;
width:20px;
height:20px;
display:none;
width:20px;
height:20px;
display:none;
&.filtered{
display:block;
background: url(../admin/images/btn-icon/cross.png) no-repeat 0px 0px;
opacity:0.5;
&:hover{
opacity:0.8;
}
}
&:active {
opacity:1;
opacity:1;
}
}
}
}
}
}
}
input {
&.ss-gridfield-sort {
height:25px;
padding: 4px;
// Placeholder styling done with an each loop because when a browser
// doesnt understand a selector, it invalidates the entire line of selectors.
// Placeholder styling done with an each loop because when a browser
// doesnt understand a selector, it invalidates the entire line of selectors.
// This avoids that, and keeps the scss tidy
$browserPlaceholder: "::-webkit-input-placeholder", ":-moz-placeholder", ":-ms-input-placeholder", ":placeholder";
border: 1px solid #313232;
@ -576,8 +576,8 @@ $gf_grid_x: 16px;
font-style:italic;
color: lighten($color-dark-grey,30%);
}
}
}
&:focus {
@include box-shadow-none;
}
@ -599,7 +599,7 @@ $gf_grid_x: 16px;
@include border-bottom-radius($gf_border_radius);
@include background-image(linear-gradient($color-base, $gf_colour_gradient_dark));
padding: $gf_grid_x/4 $gf_grid_y;
.datagrid-footer-message {
text-align: center;
padding-top: 6px;
@ -616,7 +616,7 @@ $gf_grid_x: 16px;
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
input {
width:35px; //exact width so that a four digit number can be entered
height:18px;
height:18px;
margin-bottom:-6px; //moves input field up to be aligned with the pagination buttons
padding:0px;
border: 1px solid darken($gf_colour_gradient_dark, 5%);
@ -624,7 +624,7 @@ $gf_grid_x: 16px;
}
}
z-index:5;
button{
button{
@include box-shadow-none;
border:none;
width:10px;
@ -659,7 +659,7 @@ $gf_grid_x: 16px;
}
}
}
&.last td {
border-bottom: 0 none;
}
@ -670,13 +670,13 @@ $gf_grid_x: 16px;
td:last-child{
border-right: 1px solid $gf_colour_border;
}
// Thumbnails e.g. in File admin, UploadField and HtmlEditorField file selection
td.col-StripThumbnail {
padding: 2px 4px;
width: 32px;
height: 32px;
img {
width: 32px;
height: 32px;

View File

@ -31,7 +31,7 @@ class GridFieldAddExistingAutocompleterTest extends FunctionalTest {
$response = $this->get('GridFieldAddExistingAutocompleterTest_Controller');
$this->assertFalse($response->isError());
$parser = new CSSContentParser($response->getBody());
$btns = $parser->getBySelector('.ss-gridfield #action_gridfield_relationfind');
$btns = $parser->getBySelector('.ss-gridfield .action_gridfield_relationfind');
$response = $this->post(
'GridFieldAddExistingAutocompleterTest_Controller/Form/field/testfield/search'
@ -74,7 +74,7 @@ class GridFieldAddExistingAutocompleterTest extends FunctionalTest {
$this->assertEquals(1, count($items));
$this->assertEquals($team1->ID, (int)$items[0]['data-id']);
$btns = $parser->getBySelector('.ss-gridfield #action_gridfield_relationadd');
$btns = $parser->getBySelector('.ss-gridfield .action_gridfield_relationadd');
$response = $this->post(
'GridFieldAddExistingAutocompleterTest_Controller/Form/field/testfield',
array(