Skip to content

Commit 66c897f

Browse files
ryanwelcherryanwelcher
authored
Merge pull request #127 from ryanwelcher/try/vibe-code-ui-for-post-meta
Post Meta Query updates
2 parents fd65400 + c85433f commit 66c897f

File tree

6 files changed

+391
-194
lines changed

6 files changed

+391
-194
lines changed

‎includes/Traits/Meta_Query.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ public function parse_meta_query( $meta_query_data ) {
2525
'key' => $query['meta_key'] ?? '',
2626
'value' => $query['meta_value'] ?? '',
2727
'compare' => $query['meta_compare'] ?? '',
28+
'type' => $query['meta_type'] ?? '',
2829
)
2930
);
3031
}

‎src/components/post-meta-control.js‎

Lines changed: 187 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
* WordPress dependencies
33
*/
44
import {
5-
SelectControl,
6-
TextControl,
75
Button,
86
FormTokenField,
9-
BaseControl,
7+
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
8+
__experimentalHStack as HStack,
9+
SelectControl,
10+
TextControl,
11+
ToggleControl,
1012
} from '@wordpress/components';
1113
import { __ } from '@wordpress/i18n';
14+
import { useState, useEffect } from '@wordpress/element';
1215

1316
const compareMetaOptions = [
1417
'=',
@@ -30,6 +33,23 @@ const compareMetaOptions = [
3033
'RLIKE',
3134
];
3235

36+
const metaTypeOptions = [
37+
'CHAR',
38+
'NUMERIC',
39+
'BINARY',
40+
'DATE',
41+
'DATETIME',
42+
'DECIMAL',
43+
'SIGNED',
44+
'TIME',
45+
'UNSIGNED',
46+
];
47+
48+
const toggleMargin = {
49+
marginTop: '0.75em',
50+
marginBottom: '0.75em',
51+
};
52+
3353
export const PostMetaControl = ( {
3454
registeredMetaKeys,
3555
id,
@@ -38,18 +58,34 @@ export const PostMetaControl = ( {
3858
setAttributes,
3959
} ) => {
4060
const activeQuery = queries.find( ( query ) => query.id === id );
61+
const [ advancedMode, setAdvancedMode ] = useState( false );
62+
const [ disableAdvancedToggle, setDisableAdvancedToggle ] =
63+
useState( false );
64+
65+
useEffect( () => {
66+
// This causes advanced mode to be enabled if the meta_type or meta_compare is set and breaks updating.
67+
if (
68+
( activeQuery?.meta_type && activeQuery?.meta_type !== 'CHAR' ) ||
69+
( activeQuery?.meta_compare && activeQuery?.meta_compare !== '=' )
70+
) {
71+
setAdvancedMode( true );
72+
setDisableAdvancedToggle( true );
73+
} else {
74+
setDisableAdvancedToggle( false );
75+
}
76+
}, [ activeQuery?.meta_type, activeQuery?.meta_compare ] );
4177

4278
/**
4379
* Update a query param.
4480
*
45-
* @param {*} queries
46-
* @param {*} queryId
47-
* @param {*} item
48-
* @param {*} value
49-
* @returns
81+
* @param {Array} currentQueries The current queries array
82+
* @param {string} queryId The query ID to update
83+
* @param {string} item The key to update
84+
* @param {string} value The value to update
85+
* @return {Array} The updated queries array
5086
*/
51-
const updateQueryParam = ( queries, queryId, item, value ) => {
52-
return queries.map( ( query ) => {
87+
const updateQueryParam = ( currentQueries, queryId, item, value ) => {
88+
return currentQueries.map( ( query ) => {
5389
if ( query.id === queryId ) {
5490
return {
5591
...query,
@@ -62,71 +98,17 @@ export const PostMetaControl = ( {
6298

6399
return (
64100
<>
65-
<BaseControl
66-
help={ __(
67-
'Start typing to search for a meta key or manually enter one.',
68-
'advanced-query-loop'
69-
) }
70-
__nextHasNoMarginBottom
71-
>
72-
<FormTokenField
73-
label={ __( 'Meta Key', 'advanced-query-loop' ) }
74-
value={
75-
activeQuery?.meta_key?.length
76-
? [ activeQuery.meta_key ]
77-
: []
78-
}
79-
__experimentalShowHowTo={ false }
80-
suggestions={ registeredMetaKeys }
81-
maxLength={ 1 }
82-
onChange={ ( newMeta ) => {
83-
setAttributes( {
84-
query: {
85-
...attributes.query,
86-
meta_query: {
87-
...attributes.query.meta_query,
88-
queries: updateQueryParam(
89-
queries,
90-
id,
91-
'meta_key',
92-
newMeta[ 0 ]
93-
),
94-
},
95-
},
96-
} );
97-
} }
98-
__nextHasNoMarginBottom
99-
/>
100-
</BaseControl>
101-
<TextControl
102-
label={ __( 'Meta Value', 'advanced-query-loop' ) }
103-
value={ activeQuery.meta_value }
104-
onChange={ ( newValue ) => {
105-
setAttributes( {
106-
query: {
107-
...attributes.query,
108-
meta_query: {
109-
...attributes.query.meta_query,
110-
queries: updateQueryParam(
111-
queries,
112-
id,
113-
'meta_value',
114-
newValue
115-
),
116-
},
117-
},
118-
} );
119-
} }
120-
/>
121-
<SelectControl
122-
label={ __( 'Meta Compare', 'advanced-query-loop' ) }
123-
value={ activeQuery.meta_compare }
124-
options={ [
125-
...compareMetaOptions.map( ( operator ) => {
126-
return { label: operator, value: operator };
127-
} ),
128-
] }
129-
onChange={ ( newCompare ) => {
101+
<FormTokenField
102+
label={ __( 'Meta Key', 'advanced-query-loop' ) }
103+
value={
104+
activeQuery?.meta_key?.length
105+
? [ activeQuery.meta_key ]
106+
: []
107+
}
108+
__experimentalShowHowTo={ false }
109+
suggestions={ registeredMetaKeys }
110+
maxLength={ 1 }
111+
onChange={ ( newMeta ) => {
130112
setAttributes( {
131113
query: {
132114
...attributes.query,
@@ -135,37 +117,144 @@ export const PostMetaControl = ( {
135117
queries: updateQueryParam(
136118
queries,
137119
id,
138-
'meta_compare',
139-
newCompare
120+
'meta_key',
121+
newMeta[ 0 ]
140122
),
141123
},
142124
},
143125
} );
144126
} }
145-
__nextHasNoMarginBottom
146127
/>
147-
<Button
148-
size="small"
149-
variant="secondary"
150-
isDestructive
151-
onClick={ () => {
152-
const updatedQueries = queries.filter(
153-
( query ) => query.id !== id
154-
);
128+
{ activeQuery?.meta_key?.length > 0 && (
129+
<>
130+
<TextControl
131+
label={ __( 'Meta Value', 'advanced-query-loop' ) }
132+
value={ activeQuery.meta_value }
133+
onChange={ ( newValue ) => {
134+
setAttributes( {
135+
query: {
136+
...attributes.query,
137+
meta_query: {
138+
...attributes.query.meta_query,
139+
queries: updateQueryParam(
140+
queries,
141+
id,
142+
'meta_value',
143+
newValue
144+
),
145+
},
146+
},
147+
} );
148+
} }
149+
/>
150+
{ advancedMode && (
151+
<>
152+
<SelectControl
153+
label={ __(
154+
'Meta Compare',
155+
'advanced-query-loop'
156+
) }
157+
value={ activeQuery.meta_compare }
158+
options={ [
159+
...compareMetaOptions.map( ( operator ) => {
160+
return {
161+
label: operator,
162+
value: operator,
163+
};
164+
} ),
165+
] }
166+
onChange={ ( newCompare ) => {
167+
setAttributes( {
168+
query: {
169+
...attributes.query,
170+
meta_query: {
171+
...attributes.query.meta_query,
172+
queries: updateQueryParam(
173+
queries,
174+
id,
175+
'meta_compare',
176+
newCompare
177+
),
178+
},
179+
},
180+
} );
181+
} }
182+
/>
183+
<SelectControl
184+
label={ __(
185+
'Meta Type',
186+
'advanced-query-loop'
187+
) }
188+
value={ activeQuery.meta_type }
189+
options={ [
190+
...metaTypeOptions.map( ( type ) => {
191+
return {
192+
label: type,
193+
value: type,
194+
};
195+
} ),
196+
] }
197+
onChange={ ( newType ) => {
198+
setAttributes( {
199+
query: {
200+
...attributes.query,
201+
meta_query: {
202+
...attributes.query.meta_query,
203+
queries: updateQueryParam(
204+
queries,
205+
id,
206+
'meta_type',
207+
newType
208+
),
209+
},
210+
},
211+
} );
212+
} }
213+
__nextHasNoMarginBottom
214+
/>
215+
</>
216+
) }
217+
</>
218+
) }
219+
<hr />
220+
<HStack
221+
alignment={ activeQuery?.meta_key ? 'edge' : 'right' }
222+
style={ toggleMargin }
223+
>
224+
{ activeQuery?.meta_key && (
225+
<ToggleControl
226+
checked={ advancedMode }
227+
label={ __( 'Advanced mode', 'advanced-query-loop' ) }
228+
onChange={ () => setAdvancedMode( ! advancedMode ) }
229+
disabled={ disableAdvancedToggle }
230+
/>
231+
) }
232+
<Button
233+
key={ id }
234+
variant="secondary"
235+
size="small"
236+
isDestructive
237+
onClick={ () => {
238+
const updatedQueries = queries.filter(
239+
( query ) => query.id !== id
240+
);
155241

156-
setAttributes( {
157-
query: {
158-
...attributes.query,
159-
meta_query: {
160-
...attributes.query.meta_query,
161-
queries: updatedQueries,
242+
setAttributes( {
243+
query: {
244+
...attributes.query,
245+
meta_query: {
246+
...attributes.query.meta_query,
247+
queries: updatedQueries,
248+
},
162249
},
163-
},
164-
} );
165-
} }
166-
>
167-
{ __( 'Remove meta query', 'advanced-query-loop' ) }
168-
</Button>
250+
} );
251+
} }
252+
>
253+
{ __( 'Remove query', 'advanced-query-loop' ) }
254+
</Button>
255+
</HStack>
256+
<hr />
257+
<br />
169258
</>
170259
);
171260
};

0 commit comments

Comments
 (0)