| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import ChildPanelBody from "../childPanelBody/childPanelBody"; |
| 3 |
import InputControl from "../inputControl/inputControl"; |
| 4 |
import SelectField from "../selectField/selectField"; |
| 5 |
import { getObjectValuesToJsArray } from "../../blocks/shared/helpFn"; |
| 6 |
|
| 7 |
const CustomFields = ({ props }) => { |
| 8 |
const { data, resetButton, updateCustomFieldsData, metaKeysSelectOptions } = props; |
| 9 |
const { id, key, value, operator, type } = data; |
| 10 |
|
| 11 |
const textOperators = [ |
| 12 |
{ label: "Equal (=)", value: "=" }, |
| 13 |
{ label: "Not Equal (!=)", value: "!=" }, |
| 14 |
{ label: "Like", value: "LIKE" }, |
| 15 |
{ label: "Not Like", value: "NOT LIKE" }, |
| 16 |
{ label: "In", value: "IN" }, |
| 17 |
{ label: "Not In", value: "NOT IN" }, |
| 18 |
{ label: "Exists", value: "EXISTS" }, |
| 19 |
{ label: "Not Exists", value: "NOT EXISTS" }, |
| 20 |
]; |
| 21 |
const numberOperators = [ |
| 22 |
{ label: "Equal (=)", value: "=" }, |
| 23 |
{ label: "Not Equal (!=)", value: "!=" }, |
| 24 |
{ label: "Greater (>)", value: ">" }, |
| 25 |
{ label: "Greater or Equal (>=)", value: ">=" }, |
| 26 |
{ label: "Less (<)", value: "<" }, |
| 27 |
{ label: "Less or Equal (<=)", value: "<=" }, |
| 28 |
{ label: "In", value: "IN" }, |
| 29 |
{ label: "Not In", value: "NOT IN" }, |
| 30 |
{ label: "Between", value: "BETWEEN" }, |
| 31 |
{ label: "Not Between", value: "NOT BETWEEN" }, |
| 32 |
{ label: "Exists", value: "EXISTS" }, |
| 33 |
{ label: "Not Exists", value: "NOT EXISTS" }, |
| 34 |
]; |
| 35 |
const dateOperators = [ |
| 36 |
{ label: "Today", value: "TODAY" }, |
| 37 |
{ label: "Now and Past", value: "NOW_PAST" }, |
| 38 |
{ label: "Now and Future", value: "NOW_FUTURE" }, |
| 39 |
{ label: "In the past", value: "IN_PAST" }, |
| 40 |
{ label: "Equal(=)", value: "=" }, |
| 41 |
{ label: "Not Equal(!=)", value: "!=" }, |
| 42 |
{ label: "Greater(>)", value: ">" }, |
| 43 |
{ label: "Greater or Equal (>=)", value: ">=" }, |
| 44 |
{ label: "Less (<)", value: "<" }, |
| 45 |
{ label: "Less or Equal (<=)", value: "<=" }, |
| 46 |
{ label: "Between", value: "BETWEEN" }, |
| 47 |
{ label: "Not Between", value: "NOT BETWEEN" }, |
| 48 |
{ label: "Exists", value: "EXISTS" }, |
| 49 |
{ label: "Not Exists", value: "NOT EXISTS" }, |
| 50 |
]; |
| 51 |
const booleanOperators = [ |
| 52 |
{ label: "Equal(=)", value: "=" }, |
| 53 |
{ label: "Not Equal(!=)", value: "!=" }, |
| 54 |
{ label: "Exists", value: "EXISTS" }, |
| 55 |
{ label: "Not Exists", value: "NOT EXISTS" }, |
| 56 |
]; |
| 57 |
|
| 58 |
const inputTypesData = { |
| 59 |
CHAR: { |
| 60 |
value: textOperators, |
| 61 |
input: "text", |
| 62 |
}, |
| 63 |
NUMERIC: { |
| 64 |
value: numberOperators, |
| 65 |
input: "number", |
| 66 |
}, |
| 67 |
DATE: { |
| 68 |
value: dateOperators, |
| 69 |
input: "date", |
| 70 |
}, |
| 71 |
BOOLEAN: { |
| 72 |
value: booleanOperators, |
| 73 |
input: "dropdown", |
| 74 |
}, |
| 75 |
}; |
| 76 |
const operatorValues = inputTypesData[type]?.value; |
| 77 |
const inputType = inputTypesData[type]?.input; |
| 78 |
const metaTitle = key && key.trim() ? key : __("Select Field Key", "post-carousel"); |
| 79 |
|
| 80 |
return ( |
| 81 |
<div className="sp-smart-post-taxonomies"> |
| 82 |
<ChildPanelBody |
| 83 |
title={metaTitle} |
| 84 |
initialOpen={true} |
| 85 |
resetIcon={true} |
| 86 |
resetButtonAction={() => resetButton(id)} |
| 87 |
> |
| 88 |
<SelectField |
| 89 |
label={__("Custom Fields Key", "post-carousel")} |
| 90 |
attributes={key} |
| 91 |
multiple={false} |
| 92 |
onChange={(e) => updateCustomFieldsData(id, "key", e)} |
| 93 |
items={[{ label: "Select key", value: "" }, ...metaKeysSelectOptions]} |
| 94 |
/> |
| 95 |
<SelectField |
| 96 |
label={__("Value Type", "post-carousel")} |
| 97 |
attributes={type} |
| 98 |
onChange={(e) => updateCustomFieldsData(id, "type", e)} |
| 99 |
items={[ |
| 100 |
{ label: "Text", value: "CHAR" }, |
| 101 |
{ label: "Number", value: "NUMERIC" }, |
| 102 |
{ label: "Date", value: "DATE" }, |
| 103 |
{ label: "True/False", value: "BOOLEAN" }, |
| 104 |
]} |
| 105 |
/> |
| 106 |
<SelectField |
| 107 |
label={__("Compare Operator", "post-carousel")} |
| 108 |
attributes={operator} |
| 109 |
onChange={(e) => updateCustomFieldsData(id, "operator", e)} |
| 110 |
flexStyle={false} |
| 111 |
items={operatorValues} |
| 112 |
/> |
| 113 |
{inputType !== "dropdown" && ( |
| 114 |
<InputControl |
| 115 |
label={__("Compare Value", "post-carousel")} |
| 116 |
attributes={value} |
| 117 |
inputType={inputType} |
| 118 |
flex={false} |
| 119 |
onChange={(e) => updateCustomFieldsData(id, "value", e)} |
| 120 |
/> |
| 121 |
)} |
| 122 |
{inputType === "dropdown" && ( |
| 123 |
<SelectField |
| 124 |
label={__("Compare Value", "post-carousel")} |
| 125 |
attributes={value} |
| 126 |
items={[ |
| 127 |
{ label: "True", value: "true" }, |
| 128 |
{ label: "False", value: "false" }, |
| 129 |
]} |
| 130 |
flex={true} |
| 131 |
onChange={(e) => updateCustomFieldsData(id, "value", e)} |
| 132 |
/> |
| 133 |
)} |
| 134 |
</ChildPanelBody> |
| 135 |
</div> |
| 136 |
); |
| 137 |
}; |
| 138 |
|
| 139 |
let clearSetTimeout; |
| 140 |
|
| 141 |
const FilterByCustomFields = ({ attributes, setAttributes, metaKeys }) => { |
| 142 |
const { filterByCustomFields, customFieldRelation } = attributes; |
| 143 |
const metaKeysArray = getObjectValuesToJsArray(metaKeys); |
| 144 |
const metaKeysSelectOptions = metaKeysArray?.map((meta) => { |
| 145 |
return { label: meta, value: meta }; |
| 146 |
}); |
| 147 |
|
| 148 |
const addNewCustomFieldsFn = () => { |
| 149 |
const id = filterByCustomFields?.length + 1; |
| 150 |
const newFilter = { |
| 151 |
id: id, |
| 152 |
type: "CHAR", |
| 153 |
key: "", |
| 154 |
value: "", |
| 155 |
operator: "=", |
| 156 |
ajaxLiveFilter: "", |
| 157 |
}; |
| 158 |
setAttributes({ |
| 159 |
filterByCustomFields: [...filterByCustomFields, newFilter], |
| 160 |
}); |
| 161 |
}; |
| 162 |
const resetButton = (id) => { |
| 163 |
if (filterByCustomFields?.length >= 2) { |
| 164 |
const updatedArray = filterByCustomFields?.filter((f) => f.id !== id); |
| 165 |
setAttributes({ filterByCustomFields: updatedArray }); |
| 166 |
} else { |
| 167 |
setAttributes({ |
| 168 |
filterByCustomFields: [], |
| 169 |
}); |
| 170 |
} |
| 171 |
}; |
| 172 |
const updateCustomFieldsData = (id, selector, newData) => { |
| 173 |
const updated = filterByCustomFields?.map((t) => { |
| 174 |
if (t.id === id) { |
| 175 |
return { ...t, [selector]: newData }; |
| 176 |
} |
| 177 |
return t; |
| 178 |
}); |
| 179 |
|
| 180 |
clearTimeout(clearSetTimeout); |
| 181 |
|
| 182 |
clearSetTimeout = setTimeout(() => { |
| 183 |
setAttributes({ filterByCustomFields: updated }); |
| 184 |
}, 1000); |
| 185 |
}; |
| 186 |
|
| 187 |
return ( |
| 188 |
<div className="sp-smart-post-taxonomy-panel-container"> |
| 189 |
<h4 className="sp-smart-post-sub-panel-title">Filter By Custom Fields</h4> |
| 190 |
{filterByCustomFields.length > 0 && |
| 191 |
filterByCustomFields?.map((data, i) => ( |
| 192 |
<CustomFields |
| 193 |
key={i} |
| 194 |
props={{ |
| 195 |
data: data, |
| 196 |
resetButton: resetButton, |
| 197 |
updateCustomFieldsData: updateCustomFieldsData, |
| 198 |
metaKeysSelectOptions: metaKeysSelectOptions, |
| 199 |
}} |
| 200 |
/> |
| 201 |
))} |
| 202 |
<button |
| 203 |
className="sp-smart-post-taxonomy-add-button sp-smart-post-component-mb" |
| 204 |
onClick={addNewCustomFieldsFn} |
| 205 |
> |
| 206 |
Add New |
| 207 |
</button> |
| 208 |
{filterByCustomFields.length > 1 && ( |
| 209 |
<SelectField |
| 210 |
label={__("Relation", "post-carousel")} |
| 211 |
items={[ |
| 212 |
{ label: "AND", value: "AND" }, |
| 213 |
{ label: "OR", value: "OR" }, |
| 214 |
]} |
| 215 |
flexStyle={true} |
| 216 |
attributes={customFieldRelation} |
| 217 |
attributesKey={"customFieldRelation"} |
| 218 |
setAttributes={setAttributes} |
| 219 |
/> |
| 220 |
)} |
| 221 |
</div> |
| 222 |
); |
| 223 |
}; |
| 224 |
|
| 225 |
export default FilterByCustomFields; |
| 226 |
|
