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 > 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] 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[data-selectable] td { cursor: pointer; }
.cms .ss-gridfield span button#action_gridfield_relationfind { display: none; } .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 p button.action_export span.btn-icon-download-csv { height: 17px; }
.cms .ss-gridfield .right { float: right; } .cms .ss-gridfield .right { float: right; }
.cms .ss-gridfield .right > * { float: right; margin-left: 8px; } .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; } .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 .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 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 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 .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 { 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; } .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.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.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.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: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: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; } .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(); $dataClass = $gridField->getList()->dataClass();
$forTemplate = new ArrayData(array()); $forTemplate = new ArrayData(array());
$forTemplate->Fields = new ArrayList(); $forTemplate->Fields = new FieldList();
$searchField = new TextField('gridfield_relationsearch', _t('GridField.RelationSearch', "Relation search")); $searchField = new TextField('gridfield_relationsearch', _t('GridField.RelationSearch', "Relation search"));
$searchField->setAttribute('data-search-url', Controller::join_links($gridField->Link('search'))); $searchField->setAttribute('data-search-url', Controller::join_links($gridField->Link('search')));
$searchField->setAttribute('placeholder', $this->getPlaceholderText($dataClass)); $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', $findAction = new GridField_FormAction($gridField, 'gridfield_relationfind',
_t('GridField.Find', "Find"), 'find', 'find'); _t('GridField.Find', "Find"), 'find', 'find');
$findAction->setAttribute('data-icon', 'relationfind'); $findAction->setAttribute('data-icon', 'relationfind');
$findAction->addExtraClass('action_gridfield_relationfind');
$addAction = new GridField_FormAction($gridField, 'gridfield_relationadd', $addAction = new GridField_FormAction($gridField, 'gridfield_relationadd',
_t('GridField.LinkExisting', "Link Existing"), 'addto', 'addto'); _t('GridField.LinkExisting', "Link Existing"), 'addto', 'addto');
$addAction->setAttribute('data-icon', 'chain--plus'); $addAction->setAttribute('data-icon', 'chain--plus');
$addAction->addExtraClass('action_gridfield_relationadd');
// If an object is not found, disable the action // If an object is not found, disable the action
if(!is_int($gridField->State->GridFieldAddRelation(null))) { if(!is_int($gridField->State->GridFieldAddRelation(null))) {
@ -120,6 +122,9 @@ class GridFieldAddExistingAutocompleter
$forTemplate->Fields->push($searchField); $forTemplate->Fields->push($searchField);
$forTemplate->Fields->push($findAction); $forTemplate->Fields->push($findAction);
$forTemplate->Fields->push($addAction); $forTemplate->Fields->push($addAction);
if($form = $gridField->getForm()) {
$forTemplate->Fields->setForm($form);
}
return array( return array(
$this->targetFragment => $forTemplate->renderWith($this->itemClass) $this->targetFragment => $forTemplate->renderWith($this->itemClass)

View File

@ -51,7 +51,8 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
null null
); );
$button->setAttribute('data-icon', 'download-csv'); $button->setAttribute('data-icon', 'download-csv');
$button->addExtraClass('no-ajax'); $button->addExtraClass('no-ajax action_export');
$button->setForm($gridField->getForm());
return array( return array(
$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>', $this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
); );

View File

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

View File

@ -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 display:none; //hides find button - redundant functionality
} }
p button#action_export { p button.action_export {
span.btn-icon-download-csv { span.btn-icon-download-csv {
height:17px; //exact height of icon height:17px; //exact height of icon
} }
@ -123,7 +123,7 @@ $gf_grid_x: 16px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
button#action_gridfield_relationadd { button.action_gridfield_relationadd {
height: 32px; height: 32px;
margin-left: 0; // Webkit needs this margin-left: 0; // Webkit needs this
border-top-left-radius: 0; border-top-left-radius: 0;
@ -438,7 +438,7 @@ $gf_grid_x: 16px;
button { button {
&#action_gridfield_relationadd:hover { &.action_gridfield_relationadd:hover {
color: #444 !important; /* Not sure why IE think it needs this */ color: #444 !important; /* Not sure why IE think it needs this */
} }
&:hover { &:hover {

View File

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