From 0f7a78876b6545447912bf9cdcbd66d6906859d7 Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Fri, 16 Dec 2022 18:46:06 -0800
Subject: [PATCH] Show All and Solo selection buttons for MultiSelect.

Similar to previous behavior of viewing events for single camera with 1 click, or All.

* Fix visual bug with MultiSelect when selecting similar named options.
   eg. options like frontdoor, frontside, backdoor, etc
---
 web/src/components/MultiSelect.jsx | 41 ++++++++++++++++++++----------
 web/src/routes/Events.jsx          |  8 ++++++
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 0e41a0503..03c8d55ca 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -3,15 +3,16 @@ import { useRef, useState } from 'preact/hooks';
 import Menu from './Menu';
 import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
+import Button from './Button';
 
-export default function MultiSelect({ className, title, options, selection, onToggle }) {
+export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSolo }) {
 
   const popupRef = useRef(null);
 
   const [state, setState] = useState({
     showMenu: false,
   });
-
+  
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div
@@ -23,21 +24,33 @@ export default function MultiSelect({ className, title, options, selection, onTo
       </div>
       {state.showMenu ? (
         <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
-          <Heading className="p-4 justify-center" size="md">{title}</Heading>
+          <div className="flex flex-wrap gap-2 items-center">
+            <Heading className="p-4 justify-center" size="md">{title}</Heading>
+            <Button className="mx-2" onClick={() => onShowAll() }>
+              Show All
+            </Button>
+          </div>
           {options.map((item) => (
-            <label
-              className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
-              key={item}>
-              <input
-                className="mx-4 m-0 align-middle"
-                type="checkbox"
-                checked={selection == "all" || selection.indexOf(item) > -1}
-                onChange={() => onToggle(item)} />
-              {item.replaceAll("_", " ")}
-            </label>
+            <div className='flex grow'>
+              <label
+                className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
+                key={item}>
+                <input
+                  className="mx-4 m-0 align-middle"
+                  type="checkbox"
+                  checked={selection == "all" || selection.split(',').indexOf(item) > -1}
+                  onChange={() => onToggle(item)} />
+                {item.replaceAll("_", " ")}
+              </label>
+              <div className=' justify-right'>
+                <Button className="mx-2" onClick={() => onSolo(item)}>
+                  👀
+                </Button>
+              </div>
+            </div>
           ))}
         </Menu>
       ): null}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index f259c31af..b61bda759 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -301,6 +301,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.cameras}
           selection={searchParams.cameras}
           onToggle={(item) => onToggleNamedFilter("cameras", item)}
+          onShowAll={() => onFilter("cameras", ["all"])}
+          onSolo={(item) => onFilter("cameras", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -308,6 +310,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.labels}
           selection={searchParams.labels}
           onToggle={(item) => onToggleNamedFilter("labels", item) }
+          onShowAll={() => onFilter("labels", ["all"])}
+          onSolo={(item) => onFilter("labels", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -315,6 +319,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.zones}
           selection={searchParams.zones}
           onToggle={(item) => onToggleNamedFilter("zones", item) }
+          onShowAll={() => onFilter("zones", ["all"])}
+          onSolo={(item) => onFilter("zones", item)}
         />
         {
           filterValues.sub_labels.length > 0 && (
@@ -324,6 +330,8 @@ export default function Events({ path, ...props }) {
               options={filterValues.sub_labels}
               selection={searchParams.sub_labels}
               onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
+              onShowAll={() => onFilter("sub_labels", ["all"])}
+              onSolo={(item) => onFilter("sub_labels", item)}
             />
           )}
         <div ref={datePicker} className="ml-auto">