Skip to content

Fix/exercise UI match ingredients#1235

Open
Sahasra0108 wants to merge 4 commits intowger-project:masterfrom
Sahasra0108:fix/exercise-ui-match-ingredients
Open

Fix/exercise UI match ingredients#1235
Sahasra0108 wants to merge 4 commits intowger-project:masterfrom
Sahasra0108:fix/exercise-ui-match-ingredients

Conversation

@Sahasra0108
Copy link
Copy Markdown

Proposed Changes

  • Added TuneIcon button inside search box to show/hide search filter options
  • Added language filter dropdown (same as ingredient search UI)
  • Added exact match toggle to search for exercises by exact name (name=foo)
    vs fulltext search (name__search=foo)
  • All filter options are saved to localStorage and restored on next visit
  • Added show/hide filter panel icon button on desktop view
  • Exercise grid expands to full width when filter panel is hidden

Related Issue(s)

Related to wger-project/wger#2279 (implements React part of exercise search UI improvements)

Screenshots

1. Filter popup with Language dropdown and Exact match toggle

ss6

2. Fuzzy search (Exact match OFF) - shows multiple results

ss5

3. Exact match ON - shows only exact result

![Exact match](drag your screenshot here)
ss4

4. Filter panel hidden - grid expands to full width

ss2

5. Filter panel visible

ss1

Please check that the PR fulfills these requirements

  • Tests for the changes have been added (for bug fixes / features)

const [t, i18n] = useTranslation();
const [inputValue, setInputValue] = React.useState("");
const [searchEnglish, setSearchEnglish] = useState<boolean>(true);
const defaultLanguageFilter = i18n.language === LANGUAGE_SHORT_ENGLISH
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

since this is basically the same as the IngredientLanguageFilter, I would suggest renaming that to something like SearchLanguageFilter, putting it somewhere in core and using it both in the ingredient and this search

* Search for exercises by name using the exerciseinfo endpoint
*/
export const searchExerciseTranslations = async (name: string, languageCode: string = ENGLISH_LANGUAGE_CODE, searchEnglish: boolean = true): Promise<Exercise[]> => {
export const searchExerciseTranslations = async (name: string, languageCode: string = ENGLISH_LANGUAGE_CODE, searchEnglish: boolean = true, exactMatch: boolean = false): Promise<Exercise[]> => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

we should pass the language filter like in searchIngredient(I'm just trying to make both look and work as similarly as possible)


const adapter = new ExerciseAdapter();
return data.results.map((item: unknown) => adapter.fromJson(item));
const exercises = data.results.map((item: unknown) => adapter.fromJson(item));
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sorry, the issue probably wasn't clear. If the exact match flag is set, we filter by name with name, otherwise with name__search like before. We should not do any matching client side

@coveralls
Copy link
Copy Markdown
Collaborator

Coverage Status

coverage: 75.45% (-0.09%) from 75.54% — Sahasra0108:fix/exercise-ui-match-ingredients into wger-project:master

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants