From 63192ce8730873ebbf1712ba0e513d904efadf33 Mon Sep 17 00:00:00 2001
From: Ark2307 <kr.aryan2307@gmail.com>
Date: Wed, 21 Feb 2024 16:24:53 +0530
Subject: [PATCH] added select all feature in dropdown

---
 .../components/shared/DropdownSearch.jsx      | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx
index 5b18124b63..3042762244 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Avatar, Icon, TextContainer } from '@shopify/polaris';
+import { Autocomplete, Avatar, Checkbox, Icon, TextContainer } from '@shopify/polaris';
 import { SearchMinor, ChevronDownMinor } from '@shopify/polaris-icons';
 import React, { useState, useCallback, useEffect } from 'react';
 import func from "@/util/func";
@@ -13,6 +13,7 @@ function DropdownSearch(props) {
     const [inputValue, setInputValue] = useState(value ? value : undefined);
     const [options, setOptions] = useState(deselectedOptions);
     const [loading, setLoading] = useState(false);
+    const [checked,setChecked] = useState(false)
 
 
     useEffect(() => {
@@ -102,6 +103,18 @@ function DropdownSearch(props) {
         [options],
     );
 
+    const selectAllFunc = () => {
+        if(!checked){
+            const valueArr = deselectedOptions.map((obj) => obj.value)
+            updateSelection(valueArr)
+            setChecked(true)
+        }else{
+            setChecked(false)
+            updateSelection([])
+        }
+        
+    }
+
     const textField = (
         <Autocomplete.TextField
             id={id}
@@ -122,6 +135,9 @@ function DropdownSearch(props) {
         />
     );
 
+    const showSelectAll = (allowMultiple && optionsList.length > 5)
+    const checkboxLabel = checked ? "Deselect all" : "Select all"
+
     const emptyState = (
         <React.Fragment>
             <Icon source={SearchMinor} />
@@ -141,6 +157,10 @@ function DropdownSearch(props) {
                 loading={loading}
                 textField={textField}
                 preferredPosition='below'
+                {...(showSelectAll ? {actionBefore:{
+                    content:(<Checkbox label={checkboxLabel} checked={checked} onChange={() => selectAllFunc()}/>),
+                    onAction: () => selectAllFunc(),
+                }} : {})}
             />
     );
 }