wbrawner/mealie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: advanced search now saved in URL (#1745)

Browse source 
* use query param for toggle state

* close #1678
This commit is contained in:
Hayden 2022-10-21 17:34:13 -08:00 committed by GitHub
parent c9929745f8
commit d53e78317d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/docs/documentation/getting-started/api-usage.md
View file

@ -8,7 +8,7 @@ Mealie supports long-live api tokens in the user frontend. See [user settings pa
## Key Components
### Exploring Your Local API
On your local installation you can access interactive API documentation that provides `curl` examples and expected results. This allows you to easily test and interact with your API to identify places to include your own functionality. You can visit the documentation at `http://mealie.yourdomain.com/docs` or see the example at the [Demo Site](https://mealie-demo.hay-kot.dev/docs)
On your local installation you can access interactive API documentation that provides `curl` examples and expected results. This allows you to easily test and interact with your API to identify places to include your own functionality. You can visit the documentation at `http://mealie.yourdomain.com/docs` or see the example at the [Demo Site](https://demo.mealie.io/docs).
### Extras
#### Recipe Extras

2
docs/mkdocs.yml
View file

@ -1,5 +1,5 @@
site_name: Mealie
#demo_url: https://mealie-demo.hay-kot.dev/
demo_url: https://demo.mealie.io
site_url: https://hay-kot.github.io/mealie/
use_directory_urls: true
theme:

155
frontend/pages/search.vue
View file

@ -25,77 +25,78 @@
</v-col>
</v-row>
<ToggleState>
<template #activator="{ state, toggle }">
<v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
Advanced
</v-switch>
</template>
<template #default="{ state }">
<v-expand-transition>
<v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<RecipeOrganizerSelector
v-model="includeCategories"
:input-attrs="{
solo: true,
hideDetails: true,
dense: false,
}"
:show-add="false"
:return-object="false"
selector-type="categories"
/>
<RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
</v-col>
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<RecipeOrganizerSelector
v-model="includeTags"
:input-attrs="{
solo: true,
hideDetails: true,
dense: false,
}"
:show-add="false"
:return-object="false"
selector-type="tags"
/>
<RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
</v-col>
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<v-autocomplete
v-model="includeFoods"
chips
hide-details
deletable-chips
solo
multiple
:items="foods || []"
item-text="name"
:prepend-inner-icon="$globals.icons.foods"
label="Foods"
>
<template #selection="data">
<v-chip
:key="data.index"
class="ma-1"
:input-value="data.selected"
close
label
color="accent"
dark
@click:close="includeFoods.splice(data.index, 1)"
>
{{ data.item.name || data.item }}
</v-chip>
</template>
</v-autocomplete>
<RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
</v-col>
</v-row>
</v-expand-transition>
</template>
</ToggleState>
<div>
<v-switch
v-model="advanced"
color="info"
class="ma-0 pa-0"
label="Advanced"
@input="advanced = !advanced"
@click="advanced = !advanced"
/>
<v-expand-transition>
<v-row v-show="advanced" dense class="my-0 dense flex-row align-center justify-space-around">
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<RecipeOrganizerSelector
v-model="includeCategories"
:input-attrs="{
solo: true,
hideDetails: true,
dense: false,
}"
:show-add="false"
:return-object="false"
selector-type="categories"
/>
<RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
</v-col>
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<RecipeOrganizerSelector
v-model="includeTags"
:input-attrs="{
solo: true,
hideDetails: true,
dense: false,
}"
:show-add="false"
:return-object="false"
selector-type="tags"
/>
<RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
</v-col>
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
<v-autocomplete
v-model="includeFoods"
chips
hide-details
deletable-chips
solo
multiple
:items="foods || []"
item-text="name"
:prepend-inner-icon="$globals.icons.foods"
label="Foods"
>
<template #selection="data">
<v-chip
:key="data.index"
class="ma-1"
:input-value="data.selected"
close
label
color="accent"
dark
@click:close="includeFoods.splice(data.index, 1)"
>
{{ data.item.name || data.item }}
</v-chip>
</template>
</v-autocomplete>
<RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
</v-col>
</v-row>
</v-expand-transition>
</div>
</v-container>
<v-container class="px-0 mt-6">
<RecipeCardSection
@ -135,6 +136,17 @@ export default defineComponent({
setup() {
const { assignSorted } = useRecipes(true);
// ================================================================
// Advanced Toggle
const advancedQp = useRouteQuery("advanced");
const advanced = computed({
get: () => advancedQp.value === "true",
set: (val) => {
advancedQp.value = val ? "true" : "false";
},
});
// ================================================================
// Global State
@ -282,6 +294,7 @@ export default defineComponent({
updateCatParams,
updateFoodParams,
updateTagParams,
advanced,
};
},
head() {