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 1/4] 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 0e41a0503b..03c8d55ca0 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 f259c31af5..b61bda7599 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">

From 0356e33fe04f4d4d0bb61b167239ca6b4dfdd1ad Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Sat, 17 Dec 2022 06:15:54 -0800
Subject: [PATCH 2/4] fix key prop for lint

* Change MultiSelect onSolo to onSelectSingle
---
 web/src/components/MultiSelect.jsx | 10 ++++------
 web/src/routes/Events.jsx          |  8 ++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 03c8d55ca0..d700f5dae9 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -5,14 +5,13 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
 
-export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSolo }) {
+export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
 
   const popupRef = useRef(null);
 
   const [state, setState] = useState({
     showMenu: false,
   });
-  
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div
@@ -31,10 +30,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
             </Button>
           </div>
           {options.map((item) => (
-            <div className='flex grow'>
+            <div className="flex grow" key={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}>
+                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`}>
                 <input
                   className="mx-4 m-0 align-middle"
                   type="checkbox"
@@ -43,7 +41,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                 {item.replaceAll("_", " ")}
               </label>
               <div className=' justify-right'>
-                <Button className="mx-2" onClick={() => onSolo(item)}>
+                <Button className="mx-2" onClick={() => onSelectSingle(item)}>
                   👀
                 </Button>
               </div>
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index b61bda7599..dde5f058a0 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -302,7 +302,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.cameras}
           onToggle={(item) => onToggleNamedFilter("cameras", item)}
           onShowAll={() => onFilter("cameras", ["all"])}
-          onSolo={(item) => onFilter("cameras", item)}
+          onSelectSingle={(item) => onFilter("cameras", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -311,7 +311,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.labels}
           onToggle={(item) => onToggleNamedFilter("labels", item) }
           onShowAll={() => onFilter("labels", ["all"])}
-          onSolo={(item) => onFilter("labels", item)}
+          onSelectSingle={(item) => onFilter("labels", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -320,7 +320,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.zones}
           onToggle={(item) => onToggleNamedFilter("zones", item) }
           onShowAll={() => onFilter("zones", ["all"])}
-          onSolo={(item) => onFilter("zones", item)}
+          onSelectSingle={(item) => onFilter("zones", item)}
         />
         {
           filterValues.sub_labels.length > 0 && (
@@ -331,7 +331,7 @@ export default function Events({ path, ...props }) {
               selection={searchParams.sub_labels}
               onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
               onShowAll={() => onFilter("sub_labels", ["all"])}
-              onSolo={(item) => onFilter("sub_labels", item)}
+              onSelectSingle={(item) => onFilter("sub_labels", item)}
             />
           )}
         <div ref={datePicker} className="ml-auto">

From 58d86957267eb2102754acb14149c7f91219961d Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Sat, 17 Dec 2022 10:05:51 -0800
Subject: [PATCH 3/4] cosmetic changes on MultiSelect

* Different look for SelectSingle buttons

* Show All button is aligned with the items below it, no matter the popup size
---
 web/src/components/MultiSelect.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index d700f5dae9..8068329f2e 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -4,6 +4,7 @@ import Menu from './Menu';
 import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
+import CameraIcon from '../icons/Camera';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
 
@@ -12,6 +13,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
   const [state, setState] = useState({
     showMenu: false,
   });
+  
+  const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; }
+  
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div
@@ -23,26 +27,26 @@ export default function MultiSelect({ className, title, options, selection, onTo
       </div>
       {state.showMenu ? (
         <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
-          <div className="flex flex-wrap gap-2 items-center">
+          <div className="flex flex-wrap justify-between items-center">
             <Heading className="p-4 justify-center" size="md">{title}</Heading>
-            <Button className="mx-2" onClick={() => onShowAll() }>
+            <Button className="mx-4" onClick={() => onShowAll() }>
               Show All
             </Button>
           </div>
           {options.map((item) => (
-            <div className="flex grow" key={item}>
+            <div className="flex flex-grow" key={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`}>
                 <input
                   className="mx-4 m-0 align-middle"
                   type="checkbox"
-                  checked={selection == "all" || selection.split(',').indexOf(item) > -1}
+                  checked={isOptionSelected(item)}
                   onChange={() => onToggle(item)} />
                 {item.replaceAll("_", " ")}
               </label>
-              <div className=' justify-right'>
-                <Button className="mx-2" onClick={() => onSelectSingle(item)}>
-                  👀
+              <div className="justify-right">
+                <Button color={isOptionSelected(item) ? "blue" : "black"} type="text" className="max-h-[35px] mx-2" onClick={() => onSelectSingle(item)}>
+                  <CameraIcon />
                 </Button>
               </div>
             </div>

From 86c6728fec8cbc8b149ced3f23f5b61cd00ea797 Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Sat, 17 Dec 2022 11:41:47 -0800
Subject: [PATCH 4/4] MultiSelect ShowAll unfocused by default

---
 web/src/components/MultiSelect.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 8068329f2e..99412e9385 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -29,7 +29,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
         <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
           <div className="flex flex-wrap justify-between items-center">
             <Heading className="p-4 justify-center" size="md">{title}</Heading>
-            <Button className="mx-4" onClick={() => onShowAll() }>
+            <Button tabindex="false" className="mx-4" onClick={() => onShowAll() }>
               Show All
             </Button>
           </div>