Skip to content

Conversation

gaspergrom
Copy link
Contributor

@gaspergrom gaspergrom commented May 29, 2023

Changes proposed ✍️

What

🤖 Generated by Copilot at 9432069

This pull request adds the number filter component and improves the filter UI for the frontend. It defines the NumberFilterConfig and FilterOperator types and the number.constants module to store the filter operators and values. It updates the Filter, FilterDropdown, FilterInlineSelect, and FilterInput components to use the new popover, tooltip, and error features. It modifies the number.filter.renderer, number.label.renderer, and number.parser functions to handle different filter operators and values. It adds the AppFormErrors component and the dropdown.scss style rule to display the validation errors and the active state of the filter items.

🤖 Generated by Copilot at 9432069

We filter the numbers with operators of doom
We validate the inputs and show the errors in gloom
We use the popover and the tooltip to enhance the UI
We import the constants and the enums to make the code comply

Why

How

🤖 Generated by Copilot at 9432069

  • Add a new component AppFormErrors to display validation errors for form inputs (link)
  • Modify the AppFormItem component to pass errorIcon and errorClass props to AppFormErrors and add them to its own props (link, link)
  • Replace the el-dropdown component with the el-popover component for the filter dropdown menu and add a width, a popper-class, and a reference slot to it (link)
  • Add a subLabel prop to the filter options and the FilterInlineSelect component to display additional information about the filter operators (link, link, link)
  • Add a CUSTOM ATTRIBUTES section to the filter dropdown menu to show the custom filters separately from the default ones (link)
  • Add a open ref to the FilterDropdown component to track the visibility of the popover and set it to false when an option is selected (link, link)
  • Replace the el-dropdown component with the el-tooltip component for the filter operator switch and add a tooltip effect that shows the alternative operator (link)
  • Add a new style rule for the active state of the dropdown items in the filter component (link)
  • Add the logic and UI for the number filter component using the CrFilterInlineSelect, CrFilterInput, AppFormItem, and AppFormErrors components and the minValue, numeric, and required validators (link, link, link)
  • Modify the numberApiFilterRenderer, numberItemLabelRenderer, and numberQueryUrlParser functions to handle different filter operators and values using the FilterNumberOperator enum and the numberFilterOperators array (link, link, link, link, link, link)
  • Add a new module FilterOperator that defines the FilterOperator interface for the filter operator objects (link)
  • Reduce the margin-right and increase the margin-bottom of the cr-filter-item component (link)
  • Rename the filter-input class to filter-input-field and modify its style rules (link, link, link)
  • Add a flex-wrap class to the FilterInlineSelect component to allow the prefix and the selected option to wrap to a new line (link)

Checklist ✅

  • Label appropriately with Feature, Improvement, or Bug.
  • Add screehshots to the PR description for relevant FE changes
  • New backend functionality has been unit-tested.
  • API documentation has been updated (if necessary) (see docs on API documentation).
  • Quality standards are met.

@gaspergrom gaspergrom added the Feature Created by Linear-GitHub Sync label May 29, 2023
@gaspergrom gaspergrom requested a review from joanagmaia May 29, 2023 08:21
@gaspergrom gaspergrom self-assigned this May 29, 2023
@gaspergrom gaspergrom merged commit 3319402 into feature/filters May 30, 2023
@gaspergrom gaspergrom deleted the feature/number-filter branch May 30, 2023 06:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Created by Linear-GitHub Sync
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants