Skip to content

Commit

Permalink
Add in ability to hide columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@efuller
efuller committed Nov 19, 2024
1 parent c7208e9 commit 87b1b8c
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 108 deletions.
4 changes: 3 additions & 1 deletion assets/js/admin-settings/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function AdminSettings() {
*/
const generateRule = (item, index) => {
const hideFieldTypes = item.field === LINK_SECTIONS ? allFieldsButSections : sectionsOnly;
const hideColumns = item.field === LINK_SECTIONS ? ['field'] : [];

return (
<Rule
Expand All @@ -117,6 +118,7 @@ function AdminSettings() {
value={item.value}
index={index}
hideFieldTypes={hideFieldTypes}
hideColumns={hideColumns}
/>
);
};
Expand Down Expand Up @@ -150,7 +152,7 @@ function AdminSettings() {
<tr>
<th id="apple-news-automation-column-taxonomy" scope="col">{__('Taxonomy', 'apple-news')}</th>
<th id="apple-news-automation-column-term" scope="col">{__('Term', 'apple-news')}</th>
<th id="apple-news-automation-column-value" scope="col">{__('Value', 'apple-news')}</th>
<th id="apple-news-automation-column-value" scope="col">{__('Section', 'apple-news')}</th>
<th id="apple-news-automation-column-delete" scope="col">{__('Delete?', 'apple-news')}</th>
</tr>
</thead>
Expand Down
239 changes: 132 additions & 107 deletions assets/js/admin-settings/rule.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ function Rule({
value,
index,
hideFieldTypes,
hideColumns,
}) {
const {
fields,
Expand Down Expand Up @@ -73,124 +74,148 @@ function Rule({
draggable
onDragEnd={onDragEnd}
>
<td>
<SelectControl
aria-labelledby="apple-news-automation-column-taxonomy"
disabled={busy}
onChange={(next) => onUpdate('taxonomy', next)}
options={[
{ value: '', label: __('Select Taxonomy', 'apple-news') },
...Object.keys(taxonomies).map((tax) => ({ value: tax, label: tax })),
]}
value={taxonomy}
/>
</td>
<td>
<TermSelector
aria-labelledby="apple-news-automation-column-term"
disabled={busy}
onChange={(next) => onUpdate('term_id', next)}
taxonomy={taxonomy}
termId={termId}
/>
</td>
<td>
<SelectControl
aria-labelledby="apple-news-automation-column-field"
disabled={busy}
onChange={(next) => onUpdate('field', next)}
options={getFieldTypes()}
value={field}
/>
</td>
<td>
{fieldType === 'contentGenerationType' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('None', 'apple-news') },
{ value: 'AI', label: __('AI', 'apple-news') },
]}
value={value}
/>
) : null}
{fieldType === 'sections' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Select Section', 'apple-news') },
...sections.map((sect) => ({ value: sect.id, label: sect.name })),
]}
value={value}
/>
) : null}
{fieldType === 'boolean-select' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Channel Default', 'apple-news') },
{ value: 'true', label: __('True', 'apple-news') },
{ value: 'false', label: __('False', 'apple-news') },
]}
value={value}
/>
) : null}
{fieldType === 'boolean' ? (
<ToggleControl
aria-labelledby="apple-news-automation-column-value"
checked={value === 'true'}
disabled={busy}
label=""
onChange={(next) => onUpdate('value', next.toString())}
/>
) : null}
{fieldType === 'string' ? (
<TextControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
value={value}
/>
) : null}
{fieldType === 'themes' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Select Theme', 'apple-news') },
...themes.map((name) => ({ value: name, label: name })),
]}
value={value}
/>
) : null}
</td>
<td>
<Button
disabled={busy}
isDestructive
onClick={onDelete}
>
{__('Delete Rule', 'apple-news')}
</Button>
</td>
{
hideColumns.includes('taxonomy')
? null
: (
<td>
<SelectControl
aria-labelledby="apple-news-automation-column-taxonomy"
disabled={busy}
onChange={(next) => onUpdate('taxonomy', next)}
options={[
{ value: '', label: __('Select Taxonomy', 'apple-news') },
...Object.keys(taxonomies).map((tax) => ({ value: tax, label: tax })),
]}
value={taxonomy}
/>
</td>
)
}
{
hideColumns.includes('term') ? null : (
<td>
<TermSelector
aria-labelledby="apple-news-automation-column-term"
disabled={busy}
onChange={(next) => onUpdate('term_id', next)}
taxonomy={taxonomy}
termId={termId}
/>
</td>
)
}
{
hideColumns.includes('field') ? null : (
<td>
<SelectControl
aria-labelledby="apple-news-automation-column-field"
disabled={busy}
onChange={(next) => onUpdate('field', next)}
options={getFieldTypes()}
value={field}
/>
</td>
)
}
{
hideColumns.includes('value') ? null : (
<td>
{fieldType === 'contentGenerationType' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('None', 'apple-news') },
{ value: 'AI', label: __('AI', 'apple-news') },
]}
value={value}
/>
) : null}
{fieldType === 'sections' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Select Section', 'apple-news') },
...sections.map((sect) => ({ value: sect.id, label: sect.name })),
]}
value={value}
/>
) : null}
{fieldType === 'boolean-select' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Channel Default', 'apple-news') },
{ value: 'true', label: __('True', 'apple-news') },
{ value: 'false', label: __('False', 'apple-news') },
]}
value={value}
/>
) : null}
{fieldType === 'boolean' ? (
<ToggleControl
aria-labelledby="apple-news-automation-column-value"
checked={value === 'true'}
disabled={busy}
label=""
onChange={(next) => onUpdate('value', next.toString())}
/>
) : null}
{fieldType === 'string' ? (
<TextControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
value={value}
/>
) : null}
{fieldType === 'themes' ? (
<SelectControl
aria-labelledby="apple-news-automation-column-value"
disabled={busy}
onChange={(next) => onUpdate('value', next)}
options={[
{ value: '', label: __('Select Theme', 'apple-news') },
...themes.map((name) => ({ value: name, label: name })),
]}
value={value}
/>
) : null}
</td>
)
}
{
hideColumns.includes('delete') ? null : (
<td>
<Button
disabled={busy}
isDestructive
onClick={onDelete}
>
{__('Delete Rule', 'apple-news')}
</Button>
</td>
)
}
</tr>
);
}

Rule.defaultProps = {
hideColumns: [],
hideFieldTypes: [],
};

Rule.propTypes = {
busy: PropTypes.bool.isRequired,
field: PropTypes.string.isRequired,
hideColumns: PropTypes.arrayOf(PropTypes.string),
hideFieldTypes: PropTypes.arrayOf(PropTypes.string),
index: PropTypes.number.isRequired,
onDelete: PropTypes.func.isRequired,
Expand Down

0 comments on commit 87b1b8c

Please sign in to comment.