Skip to content

Wcms 20864 - updated queryrow component mobile layout to span single column #222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
averysmithproductions wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Wcms 20864 - updated queryrow component mobile layout to span single column #222

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57c5581
WCMS-20864: updated component query-row breakpoint layout for mobile …
averysmithproductions Jun 25, 2024
4d740ff
WCMS-20864: removed testing artifacts
averysmithproductions Jun 25, 2024
06c97e5
WCMS-20864: refactored component layout to exactly match filtered res…
averysmithproductions Jun 26, 2024
a4503e8
WCMS-20864: simplified guard clause
averysmithproductions Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 55 additions & 60 deletions src/components/QueryRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,69 +56,64 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
}, [value]);

return (
<fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center ds-u-border--0">
<div className="ds-l-col--12 ds-l-md-col--8 ds-u-display--flex ds-u-justify-content--between ds-u-padding-x--0">
<Dropdown
options={propertyOptions}
className="ds-l-col--8 ds-u-padding-left--0"
value={property}
label="Column Name"
name={`${condition.key}_property`}
onChange={(e) => setProperty(e.target.value)}
/>
<Dropdown
options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
className="ds-l-col--4 ds-u-padding-x--0"
value={operator}
label="Operator"
name={`${condition.key}_operator`}
onChange={(e) => setOperator(e.target.value)}
/>
</div>
<div className="ds-l-col--12 ds-l-md-col--4 ds-u-padding-x--0 ds-u-md-padding-left--2 ds-u-display--flex ds-u-justify-content--between">
{schema[id].fields[property].mysql_type === 'date' ? (
<div>
<label
className="ds-c-label"
htmlFor={`${condition.key}_date_value`}
id={`${condition.key}_date_value-label`}
>
<span>Value</span>
</label>
<DatePicker
name={`${condition.key}_date_value`}
selected={convertUTCToLocalDate(startDate)}
onChange={(date : Date) => {
<fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-md-justify-content--end ds-u-align-items--center">
<Dropdown
options={propertyOptions}
value={property}
label="Property"
name={`${condition.key}_property`}
onChange={(e) => setProperty(e.target.value)}
className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
/>
<Dropdown
options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
value={operator}
label="Operator"
name={`${condition.key}_operator`}
onChange={(e) => setOperator(e.target.value)}
className={"ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
/>
{schema[id].fields[property].mysql_type === 'date' ? (
<div className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2">
<label
className="ds-c-label"
htmlFor={`${condition.key}_date_value`}
id={`${condition.key}_date_value-label`}
>
<span>Value</span>
</label>
<DatePicker
name={`${condition.key}_date_value`}
selected={convertUTCToLocalDate(startDate)}
onChange={(date) => {
if(date) {
Copy link
Contributor Author

@averysmithproductions averysmithproductions Jun 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code is copied from

cmsds-open-data-components/src/templates/FilteredResource/QueryRow.jsx

Line 90 in a4503e8

setStartDate(date);

I had to put a guard clause in the JavasScript to make sure the logic would run but everything else seems plug-in-play.

setStartDate(date);
setValue(date.toJSON().slice(0, 10));
}}
showMonthDropdown
showYearDropdown
dropdownMode="select"
className="ds-c-field"
withPortal
/>
</div>
) : (
<TextField
className="ds-l-col--11 ds-u-padding-x--0"
label="Value"
name={`${condition.key}_value`}
value={cleanText(value, operator)}
onChange={(e) => setValue(e.target.value)}
}
}}
showMonthDropdown
showYearDropdown
dropdownMode="select"
className={"ds-c-field"}
withPortal
/>
)}

<Button
variation="ghost"
size="small"
className="ds-u-margin-top--6 ds-u-padding-right--0"
aria-label="Delete filter"
onClick={() => remove(index)}
>
<span className="fas fa-trash"></span>
</Button>
</div>
</div>
) : (
<TextField
label="Value"
name={`${condition.key}_value`}
value={cleanText(value, operator)}
onChange={(e) => setValue(e.target.value)}
className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2"}
/>
)}
<Button
className="ds-u-margin-top--2 ds-u-sm-margin-top--4 ds-u-lg-margin-top--4 ds-u-md-margin-top--2 ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--2 ds-l-sm-col--4"
aria-label="Delete filter"
onClick={() => remove(index)}
>
Delete filter
</Button>
</fieldset>
);
};
Expand Down