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

* use query param for toggle state

* close #1678

docs/docs/documentation/getting-started/api-usage.md

@@ -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

docs/mkdocs.yml

@@ -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:

frontend/pages/search.vue

@@ -25,77 +25,78 @@
         </v-col>
       </v-row>
 
-      <ToggleState>
+      <div>
-        <template #activator="{ state, toggle }">
+        <v-switch
-          <v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
+          v-model="advanced"
-            Advanced
+          color="info"
-          </v-switch>
+          class="ma-0 pa-0"
-        </template>
+          label="Advanced"
-        <template #default="{ state }">
+          @input="advanced = !advanced"
-          <v-expand-transition>
+          @click="advanced = !advanced"
-            <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">
+        <v-expand-transition>
-                <RecipeOrganizerSelector
+          <v-row v-show="advanced" dense class="my-0 dense flex-row align-center justify-space-around">
-                  v-model="includeCategories"
+            <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                  :input-attrs="{
+              <RecipeOrganizerSelector
-                    solo: true,
+                v-model="includeCategories"
-                    hideDetails: true,
+                :input-attrs="{
-                    dense: false,
+                  solo: true,
-                  }"
+                  hideDetails: true,
-                  :show-add="false"
+                  dense: false,
-                  :return-object="false"
+                }"
-                  selector-type="categories"
+                :show-add="false"
-                />
+                :return-object="false"
-                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
+                selector-type="categories"
-              </v-col>
+              />
-              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
+              <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
-                <RecipeOrganizerSelector
+            </v-col>
-                  v-model="includeTags"
+            <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                  :input-attrs="{
+              <RecipeOrganizerSelector
-                    solo: true,
+                v-model="includeTags"
-                    hideDetails: true,
+                :input-attrs="{
-                    dense: false,
+                  solo: true,
-                  }"
+                  hideDetails: true,
-                  :show-add="false"
+                  dense: false,
-                  :return-object="false"
+                }"
-                  selector-type="tags"
+                :show-add="false"
-                />
+                :return-object="false"
-                <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
+                selector-type="tags"
-              </v-col>
+              />
-              <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
+              <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
-                <v-autocomplete
+            </v-col>
-                  v-model="includeFoods"
+            <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
-                  chips
+              <v-autocomplete
-                  hide-details
+                v-model="includeFoods"
-                  deletable-chips
+                chips
-                  solo
+                hide-details
-                  multiple
+                deletable-chips
-                  :items="foods || []"
+                solo
-                  item-text="name"
+                multiple
-                  :prepend-inner-icon="$globals.icons.foods"
+                :items="foods || []"
-                  label="Foods"
+                item-text="name"
-                >
+                :prepend-inner-icon="$globals.icons.foods"
-                  <template #selection="data">
+                label="Foods"
-                    <v-chip
+              >
-                      :key="data.index"
+                <template #selection="data">
-                      class="ma-1"
+                  <v-chip
-                      :input-value="data.selected"
+                    :key="data.index"
-                      close
+                    class="ma-1"
-                      label
+                    :input-value="data.selected"
-                      color="accent"
+                    close
-                      dark
+                    label
-                      @click:close="includeFoods.splice(data.index, 1)"
+                    color="accent"
-                    >
+                    dark
-                      {{ data.item.name || data.item }}
+                    @click:close="includeFoods.splice(data.index, 1)"
-                    </v-chip>
+                  >
-                  </template>
+                    {{ data.item.name || data.item }}
-                </v-autocomplete>
+                  </v-chip>
-                <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
+                </template>
-              </v-col>
+              </v-autocomplete>
-            </v-row>
+              <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
-          </v-expand-transition>
+            </v-col>
-        </template>
+          </v-row>
-      </ToggleState>
+        </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() {