implemented multi-edit items of restrictions

Coflnet · Sep 23, 2024 · 9a42808 · 9a42808
1 parent fb2bbbc
commit 9a42808
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/components/Flipper/FlipRestrictionList/EditRestriction/EditRestriction.module.css b/components/Flipper/FlipRestrictionList/EditRestriction/EditRestriction.module.css
@@ -0,0 +1,3 @@
+.multiSearch {
+    flex: 1;
+}
diff --git a/components/Flipper/FlipRestrictionList/EditRestriction/EditRestriction.tsx b/components/Flipper/FlipRestrictionList/EditRestriction/EditRestriction.tsx
@@ -5,6 +5,8 @@ import ItemFilter from '../../../ItemFilter/ItemFilter'
 import Tooltip from '../../../Tooltip/Tooltip'
 import TagSelect from '../TagSelect/TagSelect'
 import api from '../../../../api/ApiHelper'
+import styles from './EditRestriction.module.css'
+import ApiSearchField from '../../../Search/ApiSearchField'
 
 interface Props {
     defaultRestriction: FlipRestriction
@@ -15,6 +17,7 @@ interface Props {
 
 export interface UpdateState {
     type: 'blacklist' | 'whitelist'
+    selectedItem?: Item
     tags?: string[]
     itemFilter?: ItemFilter
 }
@@ -42,6 +45,37 @@ function EditRestriction(props: Props) {
 
     return (
         <div>
+            <ApiSearchField
+                multiple
+                className={styles.multiSearch}
+                onChange={items => {
+                    setUpdateState({
+                        ...updateState,
+                        selectedItem: items[0]
+                            ? {
+                                  tag: items[0].id,
+                                  name: items[0].dataItem.name,
+                                  iconUrl: items[0].dataItem.iconUrl
+                              }
+                            : undefined
+                    })
+                }}
+                searchFunction={api.itemSearch}
+                selected={
+                    updateState.selectedItem
+                        ? [
+                              {
+                                  dataItem: {
+                                      name: updateState.selectedItem.name,
+                                      iconUrl: updateState.selectedItem.iconUrl
+                                  },
+                                  label: updateState.selectedItem.name,
+                                  id: updateState.selectedItem.tag
+                              } as unknown as SearchResultItem
+                          ]
+                        : undefined
+                }
+            />
             <ItemFilter
                 defaultFilter={props.defaultRestriction.itemFilter}
                 filters={filters}
@@ -69,7 +103,7 @@ function EditRestriction(props: Props) {
                             onClick={() => {
                                 props.onAdd(updateState)
                             }}
-                            disabled={!isFilterValid}
+                            disabled={!isFilterValid || !!updateState.selectedItem}
                         >
                             Add filter(s)
                         </Button>

diff --git a/components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx b/components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx
@@ -155,6 +155,7 @@ function FlipRestrictionList(props: Props) {
             newRestrictions[index].tags = updateState.tags
             newRestrictions[index].isEdited = false
             newRestrictions[index].type = restriction.type
+            newRestrictions[index].item = updateState.selectedItem
         })
 
         setSetting(RESTRICTIONS_SETTINGS_KEY, JSON.stringify(getCleanRestrictionsForApi(newRestrictions)))