From 0bca369113ee3c4d0e7abbb515070aafbf65f4da Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 4 Aug 2021 22:18:19 +0200
Subject: [PATCH] feat: ItemMulit Select.

---
 .../src/components/Items/ItemsMultiSelect.js  | 52 ++++++++++++++-----
 .../SalesByItemsHeaderGeneralPanel.js         |  1 +
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Items/ItemsMultiSelect.js b/client/src/components/Items/ItemsMultiSelect.js
index ea39b4f79..1ff5a7d24 100644
--- a/client/src/components/Items/ItemsMultiSelect.js
+++ b/client/src/components/Items/ItemsMultiSelect.js
@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { MenuItem, Button } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
-import MultiSelect from 'components/MultiSelect';
+import { MenuItem, Button, Intent } from '@blueprintjs/core';
+import { MultiSelect } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'components';
 import { safeInvoke } from 'utils';
 
@@ -12,7 +11,7 @@ export function ItemsMultiSelect({
   items,
   defaultText = <T id={'All items'} />,
   buttonProps,
-
+  onTagRenderer,
   selectedItems = [],
   onItemSelect,
   ...multiSelectProps
@@ -55,6 +54,14 @@ export function ItemsMultiSelect({
     [setLocalSelected, localSelected, isItemSelected, onItemSelect],
   );
 
+  const itemsSelected = () => {
+    const results = [];
+    items.map(({ id, name }) => {
+      return isItemSelected(id) ? results.push(name) : [];
+    });
+    return results;
+  };
+
   // Filters accounts items.
   const filterItemsPredicater = useCallback(
     (query, item, _index, exactMatch) => {
@@ -70,25 +77,42 @@ export function ItemsMultiSelect({
     [],
   );
 
+  // Clear Button
+  const clearButton =
+    countSelected > 0 ? (
+      <Button
+        icon="cross"
+        minimal={true}
+        onClick={() => setLocalSelected([])}
+      />
+    ) : undefined;
+
+  // handle remove tag
+  const handleTagRemove = (tag) => {
+    let tagList = localSelected.filter((s) => s !== tag);
+    setLocalSelected(tagList);
+  };
+
   return (
     <MultiSelect
       items={items}
       noResults={<MenuItem disabled={true} text={<T id={'No items'} />} />}
       itemRenderer={itemRenderer}
       popoverProps={{ minimal: true }}
+      selectedItems={itemsSelected()}
       filterable={true}
+      fill={true}
       onItemSelect={handleItemSelect}
       itemPredicate={filterItemsPredicater}
+      tagRenderer={onTagRenderer}
+      tagInputProps={{
+        tagProps: { intent: Intent.NONE, minimal: false },
+        onRemove: handleTagRemove,
+        // rightElement: clearButton,
+      }}
+      resetOnSelect={true}
+      // openOnKeyDown={true}
       {...multiSelectProps}
-    >
-      <Button
-        text={
-          countSelected === 0
-            ? defaultText
-            : intl.get('Selected items ({count})', { count: countSelected })
-        }
-        {...buttonProps}
-      />
-    </MultiSelect>
+    />
   );
 }
diff --git a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
index 464621c57..d627a8588 100644
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
@@ -34,6 +34,7 @@ export default function SalesByItemsHeaderGeneralPanel() {
                   onItemSelect={(itemsIds) => {
                     setFieldValue('itemsIds', itemsIds);
                   }}
+                  onTagRenderer={(value) => value}
                 />
               </FormGroup>
             )}