Merge pull request #751 from tainacan/feature/735

Items list block: Syncs orderby with the one set in selection modal #735
This commit is contained in:
Mateus Machado Luna 2022-11-24 12:41:28 -03:00 committed by GitHub
commit c5ae339750
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 254 additions and 5 deletions

View File

@ -98,6 +98,14 @@
"type": "string",
"default": ""
},
"orderBy": {
"type": "string",
"default": "date"
},
"orderByMetaKey": {
"type": "string",
"default": ""
},
"blockId": {
"type": "string",
"default": ""

View File

@ -1,6 +1,205 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated on 0.19.3 due to the introduction of orderBy and orderByMetaKey */
{
attributes: {
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collectionId": {
"type": "string",
"default": ""
},
"items": {
"type": "array",
"default": []
},
"showImage": {
"type": "boolean",
"default": true
},
"showName": {
"type": "boolean",
"default": true
},
"layout": {
"type": "string",
"default": "grid"
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"gridMargin": {
"type": "number",
"default": 0
},
"searchURL": {
"type": "string",
"default": ""
},
"itemsRequestSource": {
"type": "string",
"default": ""
},
"maxItemsNumber": {
"type": "number",
"default": 12
},
"isLoading": {
"type": "boolean",
"default": false
},
"isLoadingCollection": {
"type": "boolean",
"default": false
},
"showSearchBar": {
"type": "boolean",
"default": false
},
"showCollectionHeader": {
"type": "boolean",
"default": false
},
"showCollectionLabel": {
"type": "boolean",
"default": false
},
"collection": {
"type": "object",
"default": {}
},
"searchString": {
"type": "string",
"default": ""
},
"selectedItems": {
"type": "array",
"default": []
},
"loadStrategy": {
"type": "string",
"default": "search"
},
"order": {
"type": "string",
"default": ""
},
"blockId": {
"type": "string",
"default": ""
},
"collectionBackgroundColor": {
"type": "string",
"default": "#454647"
},
"collectionTextColor": {
"type": "string",
"default": "#ffffff"
},
"mosaicHeight": {
"type": "number",
"default": 280
},
"mosaicGridColumns": {
"type": "number",
"default": 3
},
"mosaicGridRows": {
"type": "number",
"default": 3
},
"sampleBackgroundImage": {
"type": "string",
"default": ""
},
"mosaicItemFocalPoint": {
"type": "object",
"default": {
"x": 0.5,
"y": 0.5
}
},
"mosaicDensity": {
"type": "number",
"default": 5
},
"maxColumnsCount": {
"type": "number",
"default": 4
},
"imageSize": {
"type": "string",
"default": "tainacan-medium"
}
},
save: function({ attributes, className }) {
const {
content,
blockId,
collectionId,
loadStrategy,
selectedItems,
showImage,
showName,
layout,
gridMargin,
searchURL,
maxItemsNumber,
order,
showSearchBar,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor,
mosaicHeight,
mosaicGridRows,
mosaicGridColumns,
mosaicItemFocalPoint,
mosaicDensity,
maxColumnsCount,
imageSize
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return <div
{ ...blockProps }
data-module="dynamic-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
collection-id={ collectionId }
show-image={ '' + showImage }
show-name={ '' + showName }
show-search-bar={ '' + showSearchBar }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
image-size={ imageSize }
layout={ layout }
load-strategy={ loadStrategy }
mosaic-height={ mosaicHeight }
mosaic-density={ mosaicDensity }
mosaic-grid-rows={ mosaicGridRows }
mosaic-grid-columns={ mosaicGridColumns }
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
max-columns-count={ maxColumnsCount }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
grid-margin={ gridMargin }
max-items-number={ maxItemsNumber }
order={ order }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */
{
migrate( attributes ) {

View File

@ -31,6 +31,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
itemsRequestSource,
maxItemsNumber,
order,
orderBy,
orderByMetaKey,
searchString,
selectedItems,
isLoading,
@ -302,16 +304,36 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
// Set up sorting order
if (order != '' && showSearchBar)
queryObject.order = order;
else if (queryObject.order != '')
if (queryObject.order != '' && !showSearchBar)
setAttributes({ order: queryObject.order });
else if (order != '')
queryObject.order = order;
else {
queryObject.order = 'asc';
setAttributes({ order: 'asc' });
}
// Set up sorting orderby
if (queryObject.orderby != '')
setAttributes({ orderBy: queryObject.orderby });
else if (orderBy != 'date')
queryObject.orderby = orderBy;
else {
queryObject.orderby = 'date';
setAttributes({ orderBy: 'date' });
}
// Set up sorting order
// Set up sorting metakey (used by some orderby)
if (queryObject.metakey != '')
setAttributes({ orderByMetaKey: queryObject.metakey });
else if (orderByMetaKey != '')
queryObject.metakey = orderByMetaKey;
else {
queryObject.metakey = '';
setAttributes({ orderByMetaKey: '' });
}
// Set up search string
if (searchString != undefined)
queryObject.search = searchString;
else if (queryObject.search != undefined)

View File

@ -14,6 +14,8 @@ export default function({ attributes, className }) {
searchURL,
maxItemsNumber,
order,
orderBy,
orderByMetaKey,
showSearchBar,
showCollectionHeader,
showCollectionLabel,
@ -56,6 +58,8 @@ export default function({ attributes, className }) {
grid-margin={ gridMargin }
max-items-number={ maxItemsNumber }
order={ order }
orderBy={ orderBy }
orderByMetaKey={ orderByMetaKey }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>

View File

@ -44,6 +44,8 @@ export default (element) => {
maxColumnsCount: 4,
imageSize: 'tainacan-medium',
order: 'asc',
orderBy: 'date',
orderByMetaKey: '',
showSearchBar: false,
showCollectionHeader: false,
showCollectionLabel: false,
@ -75,6 +77,8 @@ export default (element) => {
loadStrategy: this.loadStrategy,
maxItemsNumber: this.maxItemsNumber,
order: this.order,
orderBy: this.orderBy,
orderByMetaKey: this.orderByMetaKey,
showSearchBar: this.showSearchBar,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
@ -107,6 +111,8 @@ export default (element) => {
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
this.orderBy = this.$el.attributes['order-by'] != undefined ? this.$el.attributes['order-by'].value : undefined;
this.orderByMetaKey = this.$el.attributes['order-by-meta-key'] != undefined ? this.$el.attributes['order-by-meta-key'].value : undefined;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;

View File

@ -299,6 +299,8 @@ export default {
maxColumnsCount: Number,
imageSize: String,
order: String,
orderBy: String,
orderByMetaKey: String,
showSearchBar: Boolean,
showCollectionHeader: Boolean,
showCollectionLabel: Boolean,
@ -415,7 +417,15 @@ export default {
this.localOrder = 'asc';
}
// Set up sorting order
// Set up orderBy
if (this.orderBy != undefined)
queryObject.orderby = this.orderBy;
// Set up orderByMetaKey
if (this.orderByMetaKey != undefined)
queryObject.metakey = this.orderByMetaKey;
// Set up search string
if (this.searchString != undefined)
queryObject.search = this.searchString;
else if (queryObject.search != undefined)