AI Changes: scan page fix, filters improvements

2026-08-07 11:53:20 +02:00
parent 7f7ae8e1ac
commit 36881293ed
5 changed files with 122 additions and 53 deletions
@@ -2,7 +2,7 @@
 import { useSubmit } from '@remix-run/react';
 import { BeerStyle, Manufacturer, WineStyle } from '@zenstackhq/runtime/models';
 import { useRef, useState } from 'react';
-import { Form, Col, Row } from 'react-bootstrap';
+import { Button, Form, Col, Row } from 'react-bootstrap';

 interface Arguments {
  beerStyles: BeerStyle[];
@@ -20,11 +20,28 @@ function DrinkFilter(arg : Arguments) {
  const showSodaFilter = arg.searchParams.has("drink", "Soda");
  const showCocktailFilter = arg.searchParams.has("drink", "Cocktail");

-  const form = useRef(null);
+  const form = useRef<HTMLFormElement | null>(null);
+  const drinkTypes = ["Beer", "Wine", "Soda", "Cocktail"];
+  const [beerStyleExpanded, setBeerStyleExpanded] = useState(false);
+  const [wineStyleExpanded, setWineStyleExpanded] = useState(false);

-  const submitAfterRender = function(){
-    setTimeout(() => submit(form.current), 10);
-  }
+  const toggleDrinkType = (drinkType: string) => {
+    const params = new URLSearchParams(arg.searchParams.toString());
+    const values = params.getAll("drink");
+
+    if (values.includes(drinkType)) {
+      params.delete("drink");
+      values.filter((value) => value !== drinkType).forEach((value) => params.append("drink", value));
+    } else {
+      params.append("drink", drinkType);
+    }
+
+    if (params.get("abv") === "all") {
+      params.delete("abv");
+    }
+
+    submit(params, { method: "get", replace: true });
+  };

  const handleFormChange = (event: React.ChangeEvent<HTMLFormElement>) => {
    const formData = new FormData(event.currentTarget);
@@ -37,6 +54,8 @@ function DrinkFilter(arg : Arguments) {
  }

  const abvSelection = arg.searchParams.get("abv") || "all";
+  const selectedBeerStyleCount = arg.searchParams.getAll("beerstyle").length;
+  const selectedWineStyleCount = arg.searchParams.getAll("winestyle").length;
  const abvOptions = [
    { value: "all", label: "All" },
    { value: "alcohol-free", label: "Alcohol free" },
@@ -87,17 +106,24 @@ function DrinkFilter(arg : Arguments) {
            </Form.Group>
            <Form.Group controlId="drink-type" className='bg-body-secondary rounded p-3 mt-3'>
              <Form.Label className='fw-bold'>Drink Type</Form.Label>
-              { ["Beer", "Wine", "Soda", "Cocktail"].map(key => (
-                  <Form.Check
-                    id={"drink-" + key}
-                    type="checkbox"
-                    label={key}
-                    name="drink"
-                    value={key}
-                    defaultChecked={arg.searchParams.has("drink", key) ? true : false}
-                  />
+              <div className='row row-cols-2 g-2'>
+                {drinkTypes.map((key) => (
+                  <div className='col' key={key}>
+                    <Button
+                      type="button"
+                      variant={arg.searchParams.has("drink", key) ? "primary" : "outline-primary"}
+                      className='w-100 text-start'
+                      aria-pressed={arg.searchParams.has("drink", key)}
+                      onClick={() => toggleDrinkType(key)}
+                    >
+                      {key}
+                    </Button>
+                  </div>
+                ))}
+              </div>
+              {arg.searchParams.getAll("drink").map((drinkValue) => (
+                <input key={drinkValue} type="hidden" name="drink" value={drinkValue} />
              ))}
-              
            </Form.Group>
            <Form.Group controlId="drink-abv" className='bg-body-secondary rounded p-3 mt-3'>
              <Form.Label className='fw-bold'>Alcohol Percentage</Form.Label>
@@ -119,34 +145,67 @@ function DrinkFilter(arg : Arguments) {
            { showBeerFilter ? (
            <>
            <Form.Group controlId="beer-style" className='bg-body-secondary rounded p-3 mt-3'>
-              <Form.Label className='fw-bold mt-3'>Beer style</Form.Label>
-              { arg.beerStyles.map(style => (
-                  <Form.Check
-                    id={"beerstyle-" + style.name}
-                    type="checkbox"
-                    label={style.name}
-                    name="beerstyle"
-                    value={style.id}
-                    defaultChecked={arg.searchParams.has("beerstyle", style.id.toString()) ? true : false}
-                  />
-              ))}
+              <div className='d-flex justify-content-between align-items-center'>
+                <Form.Label className='fw-bold mb-0'>Beer style {selectedBeerStyleCount > 0 ? ( <span className="badge text-bg-dark">{selectedBeerStyleCount} selected</span>) :  ''}</Form.Label>
+                <Button
+                  type='button'
+                  variant='outline-secondary'
+                  size='sm'
+                  onClick={() => setBeerStyleExpanded((current) => !current)}
+                >
+                  {beerStyleExpanded ? 'Collapse' : 'Expand'}
+                </Button>
+              </div>
+              {beerStyleExpanded ? (
+                <div className='mt-3'>
+                  { arg.beerStyles.map(style => (
+                    <Form.Check
+                      key={style.id}
+                      id={"beerstyle-" + style.name}
+                      type="checkbox"
+                      label={style.name}
+                      name="beerstyle"
+                      value={style.id}
+                      defaultChecked={arg.searchParams.has("beerstyle", style.id.toString()) ? true : false}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className='text-muted mt-3'>Tap expand to show beer styles</div>
+              )}
            </Form.Group>
            </>
            ) : ""}
            { showWineFilter ? (
            <Form.Group controlId="wine-style" className='bg-body-secondary rounded p-3 mt-3'>
-              <Form.Label className='fw-bold'>Wine style</Form.Label>
-              { arg.wineStyles.map(style => (
-                  <Form.Check
-                    id={"winestyle-" + style.name}
-                    type="checkbox"
-                    label={style.name}
-                    name="winestyle"
-                    value={style.id}
-                    defaultChecked={arg.searchParams.has("winestyle", style.id.toString()) ? true : false}
-                  />
-              ))}
-            </Form.Group>
+              <div className='d-flex justify-content-between align-items-center'>
+                <Form.Label className='fw-bold mb-0'>Wine style {selectedWineStyleCount > 0 ? ( <span className="badge text-bg-dark">{selectedWineStyleCount} selected</span>) :  ''}</Form.Label>
+                <Button
+                  type='button'
+                  variant='outline-secondary'
+                  size='sm'
+                  onClick={() => setWineStyleExpanded((current) => !current)}
+                >
+                  {wineStyleExpanded ? 'Collapse' : 'Expand'}
+                </Button>
+              </div>
+              {wineStyleExpanded ? (
+                <div className='mt-3'>
+                { arg.wineStyles.map(style => (
+                    <Form.Check
+                      id={"winestyle-" + style.name}
+                      type="checkbox"
+                      label={style.name}
+                      name="winestyle"
+                      value={style.id}
+                      defaultChecked={arg.searchParams.has("winestyle", style.id.toString()) ? true : false}
+                    />
+                ))}
+                </div>
+              ) : (
+                <div className='text-muted mt-3'>Tap expand to show wine styles</div>
+              )}
+              </Form.Group>
            ) : ""}
            { showSodaFilter ? (
            <Form.Group controlId="soda-carbonated" className='bg-body-secondary rounded p-3 mt-3'>