Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API Various changes #1897

Draft
wants to merge 3 commits into
base: 3.0
Choose a base branch
from
+95 −338
Draft

API Various changes #1897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea0a653
API Remove unnecessary API
GuySartorelli Feb 4, 2025
38a4476
API Move const into FormSchema class in framework
GuySartorelli Feb 5, 2025
c6c4399
API Combine GridField and CMSMain filter JS/CSS/templates
GuySartorelli Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 0 additions & 21 deletions client/src/components/GridField/GridField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,16 +101,6 @@
}
}

.grid-field__filter-open {
.grid-field__table & {
vertical-align: bottom;
margin: 0;
float: right;
margin-top: -$input-btn-padding-y;
margin-bottom: -$input-btn-padding-y;
}
}

.grid-field__filter-submit,
.grid-field__filter-clear {
.grid-field & {
Expand Down Expand Up @@ -152,17 +142,6 @@ div.grid-field__sort-field + .form__fieldgroup-item {
position: absolute;
}

.grid-field__filter-header {
.fieldgroup:not(.grid-field__filter-buttons),
.fieldgroup:not(.grid-field__filter-buttons) .fieldgroup-field {
width: 100%;
}

.ss-gridfield-button-reset {
margin-right: 0;
}
}

.grid-field__filter-buttons {
right: -5px;
position: relative;
Expand Down
14 changes: 14 additions & 0 deletions client/src/components/Search/SearchForm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,20 @@

@media(width >= 375px) {
flex-direction: row;

// Make sure fields using WithinRangeFilter display the same in gridfield search
// as they do in CMSMain search
// This is necessary to override .cms-edit-form styling which doesn't apply in CMSMain
.form-group {
margin-right: map_get($spacers, 2);
display: inline-block;

.form__field-holder,
.form__field-label {
padding-left: 0;
padding-right: 0;
}
}
}
}

Expand Down
211 changes: 37 additions & 174 deletions client/src/legacy/GridField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import $ from 'jquery';
import i18n from 'i18n';
import React from 'react';
import { createRoot } from 'react-dom/client';
import Search from 'components/Search/Search.js';
import { schemaMerge } from 'lib/schemaFieldValues';
import { loadComponent } from 'lib/Injector';

import '../../../thirdparty/jquery-ui/jquery-ui.js';
Expand All @@ -14,12 +12,9 @@ $.entwine('ss', function($) {
onmatch: function () {
if (this.needsColumnFix()) {
this.fixColumns();
this.injectSearchButton(false);
}

if (this.hasFilters()) {
this.injectSearchButton(true);
};
this.fixShowFilters();

if (this.is('.grid-field--lazy-loadable') && (
(this.closest('.ss-tabset, .cms-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
Expand All @@ -32,6 +27,14 @@ $.entwine('ss', function($) {
this.data('gridfield-lazy-load-state', 'ready');
},

fixShowFilters: function() {
if (this.hasFilters()) {
this.addClass('show-filter');
} else {
this.removeClass('show-filter');
}
},

/**
* @func Trigger a lazy load on this gridfield
*/
Expand All @@ -52,7 +55,7 @@ $.entwine('ss', function($) {
reload: function(ajaxOpts, successCallback) {
var self = this, form = this.closest('form'),
focusedElName = this.find(':input:focus').attr('name'), // Save focused element for restoring after refresh
data = form.find(':input:not(.grid-field__search-holder :input, .relation-search)').serializeArray(),
data = form.find(':input:not(.cms-content-filters :input, .relation-search)').serializeArray(),
tbody = this.find('tbody'),
colspan = this.find('.grid-field__title-row th').attr('colspan');
;
Expand Down Expand Up @@ -95,15 +98,6 @@ $.entwine('ss', function($) {
// multiple relationships via keyboard.
if(focusedElName) self.find(':input[name="' + focusedElName + '"]').focus();

// Update filter
if (self.find('.grid-field__filter-header, .grid-field__search-holder').length) {
var visible = ajaxOpts.data[0].filter === "show";
if (self.needsColumnFix()) {
self.fixColumns();
}
self.injectSearchButton(visible);
}

if(successCallback) successCallback.apply(this, arguments);
self.trigger('reload', self);

Expand All @@ -117,6 +111,7 @@ $.entwine('ss', function($) {
},
complete: function(request, status) {
self.find('.loading').removeClass('loading');
self.fixShowFilters();
}
}, ajaxOpts));
},
Expand Down Expand Up @@ -166,7 +161,7 @@ $.entwine('ss', function($) {

needsColumnFix: function() {
return (
this.find('.grid-field__filter-header, .grid-field__search-holder').length &&
this.find('.cms-content-filters').length &&
!this.find('.grid-field__col-compact').length &&
!this.find('th.col-Actions').length
);
Expand All @@ -178,30 +173,6 @@ $.entwine('ss', function($) {
var cell = $(this).find('td:last');
cell.attr('colspan', 2);
});
var $extraCell = $('<th class="extra" />');
$('.grid-field__filter-header th:last .action').each(function() {
$(this).detach();
$extraCell.append($(this));
});
$('.grid-field__filter-header').append($extraCell);
},

injectSearchButton: function(visible) {
const hasLegacyFilterHeader = this.find('.grid-field__filter-header').length > 0;
let content;
if (visible) {
content = '<span class="non-sortable"></span>';
this.addClass('show-filter').find('.grid-field__filter-header, .grid-field__search-holder').removeClass('grid-field__search-holder--hidden');
if (!hasLegacyFilterHeader) {
this.find(':button[name=showFilter]').hide();
}
} else {
content = '<button type="button" title="Open search and filter" name="showFilter" class="btn btn-secondary font-icon-search btn--no-text btn--icon-lg grid-field__filter-open"></button>';
this.removeClass('show-filter').find('.grid-field__filter-header, .grid-field__search-holder').addClass('grid-field__search-holder--hidden');
}
if (hasLegacyFilterHeader) {
this.find('.sortable-header th:last').html(content);
}
},

/**
Expand Down Expand Up @@ -339,19 +310,17 @@ $.entwine('ss', function($) {
})

$('.grid-field :button[name=showFilter]').entwine({
onclick: function(e) {
this.closest('.grid-field')
.find('.grid-field__filter-header, .grid-field__search-holder')
.removeClass('grid-field__search-holder--hidden')
.find(':input:first').focus(); // focus first search field

this.closest('.grid-field').addClass('show-filter');
this.parent().html('<span class="non-sortable"></span>');
e.preventDefault();
}
/**
* Overrides showHide function in LeftAndMain.js
*/
showHide() {
this.closest('.grid-field').toggleClass('show-filter');
this._super();
// jQuery has to be used with this explicit name here or it won't work for some reason
jQuery(this).toggle();
},
});


$('.grid-field .ss-gridfield-item').entwine({
onclick: function (event) {
if (event.target.classList.contains('action-menu__toggle')) {
Expand Down Expand Up @@ -671,36 +640,19 @@ $.entwine('ss', function($) {
}
});

$('.js-injector-boot .grid-field .grid-field__search-holder').entwine({
Component: null,
ReactRoot: null,

$('.js-injector-boot .grid-field .search-holder').entwine({
onmatch() {
this._super();

// Make sure this appears at the top of the gridfield
this.prependTo(this.parent());
const holder = this.closest('.cms-content-filters');
holder.prependTo(holder.parent());

const cmsContent = this.closest('.cms-content').attr('id');
const context = (cmsContent)
? { context: cmsContent }
: {};

const Search = loadComponent('Search', context);
this.setComponent(Search);

this.refresh();
},

onunmatch() {
// Allow LeftAndMain.js to set up the search holder
this._super();
const root = this.getReactRoot();
if (root) {
root.unmount();
this.setReactRoot(null);
}
},

/**
* Overrides close function in LeftAndMain.js
*/
close() {
const props = this.data('schema');

Expand All @@ -711,13 +663,6 @@ $.entwine('ss', function($) {
triggerChange: false
}];

if (props.clearActionState) {
ajaxData.push({
name: 'ActionState',
value: props.clearActionState,
});
}

const gridField = $(this).getGridField();
const successCallback = function() {
gridField.keepStateInHistory();
Expand All @@ -726,6 +671,9 @@ $.entwine('ss', function($) {
gridField.reload({ data: ajaxData }, successCallback);
},

/**
* Overrides search function in LeftAndMain.js
*/
search(data) {
const props = this.data('schema');

Expand All @@ -736,13 +684,6 @@ $.entwine('ss', function($) {
triggerChange: false
}];

if (props.searchActionState) {
ajaxData.push({
name: 'ActionState',
value: props.searchActionState,
});
}

for (const [key, value] of Object.entries(data)) {
if (value) {
const name = `filter[${props.gridfield}][${key}]`
Expand All @@ -758,29 +699,12 @@ $.entwine('ss', function($) {
gridField.reload({ data: ajaxData }, successCallback);
},

refresh() {
const props = this.data('schema');
const Search = this.getComponent();
const handleHide = () => this.close();
const handleSearch = (data) => this.search(data);
const idName = String(props.gridfield).replace(/\-/g, '.');

let root = this.getReactRoot();
if (!root) {
root = createRoot(this[0]);
}
root.render(
<Search
id={`${props.gridfield}Search`}
display="VISIBLE"
displayBehavior="HIDEABLE"
filterPrefix="Search__"
onHide={handleHide}
onSearch={handleSearch}
{...props}
/>
);
this.setReactRoot(root);
/**
* Overrides getSearchID function in LeftAndMain.js
*/
getSearchID() {
const data = this.data('schema');
return `${data.gridfield}Search`;
},
});

Expand All @@ -794,67 +718,6 @@ $.entwine('ss', function($) {
e.preventDefault();
}
}
})

/**
* Catch submission event in filter input fields, and submit the correct button
* rather than the whole form.
*/
$('.grid-field .grid-field__filter-header :input').entwine({
onmatch: function() {
var filterbtn = this.closest('.extra').find('.ss-gridfield-button-filter'),
resetbtn = this.closest('.extra').find('.ss-gridfield-button-reset');

if(this.val()) {
filterbtn.addClass('filtered');
resetbtn.addClass('filtered');
}
this._super();
},
onunmatch: function() {
this._super();
},
onkeydown: function(e) {
// Skip reset button events, they should trigger default submission
if(this.closest('.ss-gridfield-button-reset').length) return;

var filterbtn = this.closest('.extra').find('.ss-gridfield-button-filter'),
resetbtn = this.closest('.extra').find('.ss-gridfield-button-reset');

if(e.keyCode == '13') {
var btns = this.closest('.grid-field__filter-header').find('.ss-gridfield-button-filter');
var filterState='show'; //filterstate should equal current state.
if(this.hasClass('ss-gridfield-button-close')||!(this.closest('.grid-field').hasClass('show-filter'))){
filterState='hidden';
}

var ajaxData = [{
name: btns.attr('name'),
value: btns.val(),
filter: filterState,
triggerChange: false
}];

if (btns.data('action-state')) {
ajaxData.push({
name: 'ActionState',
value: JSON.stringify(btns.data('action-state')),
});
}

const gridField = $(this).getGridField();
const successCallback = function() {
gridField.keepStateInHistory();
};

gridField.reload({ data: ajaxData }, successCallback);

return false;
}else{
filterbtn.addClass('hover-alike');
resetbtn.addClass('hover-alike');
}
}
});

$(".grid-field .relation-search").entwine({
Expand Down
8 changes: 3 additions & 5 deletions client/src/legacy/LeftAndMain.EditForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,10 @@ $.entwine('ss', function($){
PlaceholderHtml: '',

/**
* Variable: ChangeTrackerOptions
* (Object)
* This can be customised to change settings for the change tracker.
* See jquery.changetracker.js
*/
ChangeTrackerOptions: {
ignoreFieldSelector: '.no-change-track, .ss-upload :input, .cms-navigator :input'
},
ChangeTrackerOptions: {},

/**
* Boolean for tracking whether a validation error has been already been shown. Used because tabs can
Expand Down
Loading