| 1 |
/** |
| 2 |
* Components dependencies |
| 3 |
*/ |
| 4 |
import ReactSelectControl from '../components/react-select-control'; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
const { __ } = wp.i18n; |
| 10 |
|
| 11 |
const { |
| 12 |
addFilter, |
| 13 |
} = wp.hooks; |
| 14 |
|
| 15 |
const { |
| 16 |
BaseControl, |
| 17 |
Placeholder, |
| 18 |
ToggleControl, |
| 19 |
TextControl, |
| 20 |
TextareaControl, |
| 21 |
SelectControl, |
| 22 |
RangeControl, |
| 23 |
PanelBody, |
| 24 |
Disabled, |
| 25 |
Notice, |
| 26 |
} = wp.components; |
| 27 |
|
| 28 |
/** |
| 29 |
* Add fields to Query Settings. |
| 30 |
* |
| 31 |
* @param {JSX} fields Original block. |
| 32 |
* @param {Object} props Block data. |
| 33 |
* @param {Object} config Block config. |
| 34 |
* |
| 35 |
* @return {JSX} Block. |
| 36 |
*/ |
| 37 |
function setQuerySettings(fields, props, config) { |
| 38 |
const { |
| 39 |
attributes, |
| 40 |
setAttributes, |
| 41 |
isFieldVisible, |
| 42 |
} = props; |
| 43 |
|
| 44 |
if ( 'projects' !== attributes['source'] && 'categories' !== attributes['source'] ) { |
| 45 |
return fields; |
| 46 |
} |
| 47 |
|
| 48 |
return ( |
| 49 |
<div> |
| 50 |
{ ( isFieldVisible('projects_filter_post_type', config, attributes) ) ? ( |
| 51 |
<SelectControl |
| 52 |
label={__("Filter by Post Type")} |
| 53 |
value={ attributes['projects_filter_post_type'] } |
| 54 |
options={ config.post_types_stack } |
| 55 |
onChange={ function(val){ |
| 56 |
setAttributes({ 'projects_filter_post_type': val }); |
| 57 |
} } |
| 58 |
/> |
| 59 |
) : ( null ) } |
| 60 |
|
| 61 |
{ ( isFieldVisible('projects_filter_categories', config, attributes) ) ? ( |
| 62 |
<ReactSelectControl |
| 63 |
label={__("Filter by Categories")} |
| 64 |
isMulti={ true } |
| 65 |
val={ attributes['projects_filter_categories'] } |
| 66 |
options={ config.categories_stack } |
| 67 |
onChange={ function(val){ |
| 68 |
setAttributes({ 'projects_filter_categories': val }); |
| 69 |
} } |
| 70 |
/> |
| 71 |
) : ( null ) } |
| 72 |
|
| 73 |
{ ( isFieldVisible('projects_filter_offset', config, attributes) ) ? ( |
| 74 |
<TextControl |
| 75 |
label={__("Offset")} |
| 76 |
value={ attributes['projects_filter_offset'] } |
| 77 |
onChange={ function(val){ |
| 78 |
setAttributes({ 'projects_filter_offset': val }); |
| 79 |
} } |
| 80 |
/> |
| 81 |
) : ( null ) } |
| 82 |
|
| 83 |
{ ( isFieldVisible('projects_orderby', config, attributes) ) ? ( |
| 84 |
<SelectControl |
| 85 |
label={__("Order By")} |
| 86 |
value={ attributes['projects_orderby'] } |
| 87 |
options={ |
| 88 |
[ |
| 89 |
{ value: 'date', label: __('Published Date') }, |
| 90 |
{ value: 'modified', label: __('Modified Date') }, |
| 91 |
{ value: 'title', label: __('Title') }, |
| 92 |
{ value: 'rand', label: __('Random') }, |
| 93 |
{ value: 'views', label: __('Views') }, |
| 94 |
{ value: 'comment_count', label: __('Comment Count') }, |
| 95 |
{ value: 'ID', label: __('ID') }, |
| 96 |
] |
| 97 |
} |
| 98 |
onChange={ function(val){ |
| 99 |
setAttributes({ 'projects_orderby': val }); |
| 100 |
} } |
| 101 |
/> |
| 102 |
) : ( null ) } |
| 103 |
|
| 104 |
{ ( isFieldVisible('projects_order', config, attributes) ) ? ( |
| 105 |
<SelectControl |
| 106 |
label={__("Order")} |
| 107 |
value={ attributes['projects_order'] } |
| 108 |
options={ |
| 109 |
[ |
| 110 |
{ value: 'DESC', label: __('Descending') }, |
| 111 |
{ value: 'ASC', label: __('Ascending') }, |
| 112 |
] |
| 113 |
} |
| 114 |
onChange={ function(val){ |
| 115 |
setAttributes({ 'projects_order': val }); |
| 116 |
} } |
| 117 |
/> |
| 118 |
) : ( null ) } |
| 119 |
|
| 120 |
{ ( isFieldVisible('categories_filter_ids', config, attributes) ) ? ( |
| 121 |
<ReactSelectControl |
| 122 |
label={__("Filter by Categories")} |
| 123 |
isMulti={ true } |
| 124 |
val={ attributes['categories_filter_ids'] } |
| 125 |
options={ config.categories_stack } |
| 126 |
onChange={ function(val){ |
| 127 |
setAttributes({ 'categories_filter_ids': val }); |
| 128 |
} } |
| 129 |
/> |
| 130 |
) : ( null ) } |
| 131 |
|
| 132 |
{ ( isFieldVisible('categories_orderby', config, attributes) ) ? ( |
| 133 |
<SelectControl |
| 134 |
label={__("Order By")} |
| 135 |
value={ attributes['categories_orderby'] } |
| 136 |
options={ |
| 137 |
[ |
| 138 |
{ value: 'name', label: __('Name') }, |
| 139 |
{ value: 'count', label: __('Posts count') }, |
| 140 |
{ value: 'include', label: __('Filter include') }, |
| 141 |
{ value: 'id', label: __('ID') }, |
| 142 |
] |
| 143 |
} |
| 144 |
onChange={ function(val){ |
| 145 |
setAttributes({ 'categories_orderby': val }); |
| 146 |
} } |
| 147 |
/> |
| 148 |
) : ( null ) } |
| 149 |
|
| 150 |
{ ( isFieldVisible('categories_order', config, attributes) ) ? ( |
| 151 |
<SelectControl |
| 152 |
label={__("Order")} |
| 153 |
value={ attributes['categories_order'] } |
| 154 |
options={ |
| 155 |
[ |
| 156 |
{ value: 'DESC', label: __('Descending') }, |
| 157 |
{ value: 'ASC', label: __('Ascending') }, |
| 158 |
] |
| 159 |
} |
| 160 |
onChange={ function(val){ |
| 161 |
setAttributes({ 'categories_order': val }); |
| 162 |
} } |
| 163 |
/> |
| 164 |
) : ( null ) } |
| 165 |
</div> |
| 166 |
); |
| 167 |
} |
| 168 |
addFilter('sight.querySettings.fields', 'sight/querySettings/set/fields', setQuerySettings, 10); |
| 169 |
|
