Skip to content
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

Column filters #2038

Merged
merged 3 commits into from
Dec 11, 2024
Merged

Column filters #2038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6af228
fix click on < for Filter columns
baudelotphilippe Dec 10, 2024
d78e013
improve ux
baudelotphilippe Dec 10, 2024
d98f175
fix horizontal scroll
baudelotphilippe Dec 10, 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
2 changes: 1 addition & 1 deletion otoroshi/javascript/src/components/Toasts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export class Toasts extends Component {
<div
id="otoroshi-toasts"
style={{
padding: 10,
margin: 10,
paddingBottom: 0,
zIndex: 999999,
display: 'flex',
Expand Down
44 changes: 23 additions & 21 deletions otoroshi/javascript/src/components/inputs/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,18 +90,21 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
onClick={(e) => e.stopPropagation()}
>
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '2.5rem' }}>
<div className="d-flex items-center">
<i
className="fa fa-chevron-left me-3"
style={{ cursor: 'pointer' }}
onClick={() => {
if (isCustomFieldView) showCustomField(false);
else closeTab();
}}
/>
<h3 style={{ fontSize: '1.5rem' }} className="text-center">
{isCustomFieldView ? 'New custom field' : 'Columns'}
</h3>
<div className="d-flex justify-content-between">
<div className='d-flex items-center'>
<i
className="fa fa-chevron-left me-3"
style={{ cursor: 'pointer' }}
onClick={() => {
if (isCustomFieldView) showCustomField(false);
else closeTab();
}}
/>
<h3 style={{ fontSize: '1.5rem' }} className="text-center">
{isCustomFieldView ? 'New column' : 'Columns'}
</h3>
</div>
<Button type="quiet" text="X" onClick={closeTab} className="btn-sm" />
</div>

<div className="wizard-content">
Expand All @@ -110,7 +113,7 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
<NgStringRenderer label="Field path" onChange={setFieldPath} value={fieldPath} />
<Button
type="save"
text="Add custom field"
text="Add this column"
onClick={() => addField(fieldPath)}
className="my-2"
disabled={stringifiedExampleValue.length <= 0}
Expand Down Expand Up @@ -185,9 +188,12 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
key={column}
>
<div className="d-flex items-center">
<label className={`col-xs-12 col-form-label`}>
{firstLetterUppercase(columnParts.slice(-1)[0]).replace(/_/g, ' ')}{' '}
</label>
{coreFields && !coreFields.includes(column) && (
<Button
className="btn-sm me-2"
className="btn-sm ms-2"
type="danger"
onClick={(e) => {
e.stopPropagation();
Expand All @@ -197,9 +203,6 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
<i className="fa fa-trash" />
</Button>
)}
<label className={`col-xs-12 col-form-label`}>
{firstLetterUppercase(columnParts.slice(-1)[0]).replace(/_/g, ' ')}{' '}
</label>
</div>
<div className="">
{enabled && <OnSwitch onChange={() => onChange(column, false)} />}
Expand All @@ -216,14 +219,13 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
}}
onClick={() => showCustomField(true)}
>
Add custom field
Add a column
<i className="fa fa-chevron-right ms-1" />
</Button>
</>
)}
</div>

<Button text="Close" onClick={closeTab} className="mt-2" />
</div>
</div>
</div>
Expand All @@ -232,8 +234,8 @@ function ColumnsSelector({ fields, onChange, fetchTemplate, addField, removeFiel
className="ms-auto btn-sm d-flex align-items-center mb-1"
onClick={() => setOpen(true)}
>
<i className="fas fa-filter me-1" />
Filter columns
<i className="fas fa-table-columns me-1" />
Columns
</Button>
</>
);
Expand Down
1 change: 1 addition & 0 deletions otoroshi/javascript/src/style/components/_reactTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.ReactTable {
border: none !important;
overflow-y: scroll;

input {
color: var(--color_level2) !important;
Expand Down
Loading