From d10630426908121a26e58c61652ff93c73afeb15 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Fri, 26 Apr 2024 17:34:56 +0530
Subject: [PATCH 1/2] feat(table): add sprting

---
 package.json                                  |  4 +-
 .../Toolbar/SearchAndFilterButtonToolbar.tsx  | 61 ++++++++++++++++++-
 .../components/Toolbar/SortImage/index.tsx    | 52 ++++++++++++++++
 src/components/basic/Table/index.tsx          |  9 +++
 4 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 src/components/basic/Table/components/Toolbar/SortImage/index.tsx

diff --git a/package.json b/package.json
index 6233b0a9..7bb84815 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@catena-x/portal-shared-components",
-  "version": "2.1.44",
+  "name": "@nidhi.garg/portal-shared-components",
+  "version": "2.1.45",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
diff --git a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
index 27e5d592..eb5f8e5c 100644
--- a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
+++ b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
@@ -27,6 +27,8 @@ import { ViewSelector } from '../../../ViewSelector'
 import type { view } from '../../../ViewSelector'
 import { Typography } from '../../../Typography'
 import type { SelectedFilter } from './UltimateToolbar'
+import { SortOption } from '../../../SortOption'
+import SortImage from './SortImage'
 
 export interface SearchAndFilterButtonToolbarProps extends ToolbarProps {
   placeholder?: string
@@ -35,6 +37,9 @@ export interface SearchAndFilterButtonToolbarProps extends ToolbarProps {
   filterViews?: view[]
   defaultFilter?: string
   onFilter?: (selectedFilter: SelectedFilter) => void
+  defaultSortOption?: string
+  sortOptions?: { label: string, value: string }[]
+  onSortClick?: (value: string) => void
   descriptionText?: string
   autoFocus?: boolean
 }
@@ -49,12 +54,33 @@ export const SearchAndFilterButtonToolbar = ({
   searchDebounce = 500,
   filterViews,
   defaultFilter = '',
+  defaultSortOption,
+  sortOptions,
+  onSortClick,
   descriptionText,
   autoFocus,
 }: SearchAndFilterButtonToolbarProps) => {
+  // defaultSortOption = 'demo'
+  // sortOptions = [{
+  //   label: 'test',
+  //   value: 'test'
+  // },
+  // {
+  //   label: 'demo',
+  //   value: 'demo'
+  // }]
+
+  // onSortClick = (value: string) => {
+  //   console.log('value', value)
+  //   defaultSortOption = value
+  // }
+
+  // console.log('sortOption', defaultSortOption)
+
   const [searchInputText, setSearchInputText] = useState<string>(
     searchExpr ?? (searchInputData != null ? searchInputData.text : '')
   )
+  const [showModal, setShowModal] = useState<boolean>(false)
 
   const { spacing } = useTheme()
 
@@ -108,8 +134,8 @@ export const SearchAndFilterButtonToolbar = ({
     padding: spacing(2, 0, 6, 0),
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    flexDirection: 'column',
+    justifyContent: 'center',
+    flexDirection: 'row',
     marginTop: '40px',
   }
 
@@ -140,6 +166,37 @@ export const SearchAndFilterButtonToolbar = ({
           <ViewSelector activeView={defaultFilter} views={filterViews} />
         </Box>
       )}
+      {
+        sortOptions && defaultSortOption &&
+        <>
+          <SortImage
+            onClick={() => {
+              setShowModal(!showModal)
+            }}
+            selected={showModal}
+          />
+          <Box sx={{
+            position: 'absolute',
+            left: '73%',
+            marginTop: '6%',
+            background: '#f9f9f9',
+            boxShadow: '0px 10px 20px rgba(80, 80, 80, 0.3)',
+            borderRadius: '16px',
+            zIndex: 9,
+          }}>
+            <SortOption
+              show={showModal}
+              sortOptions={sortOptions}
+              selectedOption={defaultSortOption}
+              setSortOption={(value: string) => {
+                onSortClick?.(value)
+                setShowModal(false)
+              }}
+            />
+          </Box>
+        </>
+      }
+
       {descriptionText && (
         <Box
           sx={{
diff --git a/src/components/basic/Table/components/Toolbar/SortImage/index.tsx b/src/components/basic/Table/components/Toolbar/SortImage/index.tsx
new file mode 100644
index 00000000..83ed2846
--- /dev/null
+++ b/src/components/basic/Table/components/Toolbar/SortImage/index.tsx
@@ -0,0 +1,52 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Mercedes-Benz Group AG and BMW Group AG
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import Sort from '@mui/icons-material/Sort'
+import { Box } from '@mui/material'
+
+interface SortIconProps {
+  onClick: React.MouseEventHandler
+  selected?: boolean
+}
+
+export default function SortImage({ onClick, selected }: SortIconProps) {
+  return (
+    <Box
+      sx={{
+        marginLeft: '30px',
+        cursor: 'pointer',
+      }}
+    >
+      <Sort
+        onClick={onClick}
+        sx={{
+          fontSize: 35,
+          color: selected ? '#0D55AF' : '#939393',
+          padding: '5px',
+          backgroundColor: selected ? 'rgba(15, 113, 203, 0.05)' : 'white',
+          ':hover': {
+            color: '#0D55AF',
+            backgroundColor: 'rgba(15, 113, 203, 0.05)',
+          },
+        }}
+      />
+    </Box>
+  )
+}
diff --git a/src/components/basic/Table/index.tsx b/src/components/basic/Table/index.tsx
index 70e3878a..e7ea5ad1 100644
--- a/src/components/basic/Table/index.tsx
+++ b/src/components/basic/Table/index.tsx
@@ -65,6 +65,9 @@ export interface TableProps extends DataGridProps {
   descriptionText?: string
   defaultFilter?: string
   filterViews?: view[]
+  defaultSortOption?: string
+  sortOptions?: {label: string, value: string}[]
+  onSortClick?: (value: string) => void
   alignCell?: string
   error?: {
     status: number
@@ -101,6 +104,9 @@ export const Table = ({
   descriptionText,
   defaultFilter,
   filterViews,
+  defaultSortOption,
+  sortOptions,
+  onSortClick,
   alignCell = 'center',
   error,
   reload,
@@ -124,6 +130,9 @@ export const Table = ({
     descriptionText,
     defaultFilter,
     filterViews,
+    defaultSortOption,
+    sortOptions,
+    onSortClick,
     autoFocus,
   }
 

From aa239cf2f16aef7fcbca4dd05f8d76de8fbf68df Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <nidhi.garg@partner.bmw.in>
Date: Mon, 29 Apr 2024 10:20:48 +0530
Subject: [PATCH 2/2] feat(table): fix code smell error

---
 .../Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx | 4 ++--
 .../basic/Table/components/Toolbar/SortImage/index.tsx        | 2 +-
 src/components/basic/Table/index.tsx                          | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
index 0c5ab8d6..307c3983 100644
--- a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
+++ b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
@@ -27,7 +27,7 @@ import { ViewSelector } from '../../../ViewSelector'
 import type { View } from '../../../ViewSelector'
 import { Typography } from '../../../Typography'
 import type { SelectedFilter } from './UltimateToolbar'
-import { SortOption } from '../../../SortOption'
+import { SortOption, type SortOptionsType } from '../../../SortOption'
 import SortImage from './SortImage'
 
 export interface SearchAndFilterButtonToolbarProps extends ToolbarProps {
@@ -38,7 +38,7 @@ export interface SearchAndFilterButtonToolbarProps extends ToolbarProps {
   defaultFilter?: string
   onFilter?: (selectedFilter: SelectedFilter) => void
   defaultSortOption?: string
-  sortOptions?: { label: string, value: string }[]
+  sortOptions?: SortOptionsType[]
   onSortClick?: (value: string) => void
   descriptionText?: string
   autoFocus?: boolean
diff --git a/src/components/basic/Table/components/Toolbar/SortImage/index.tsx b/src/components/basic/Table/components/Toolbar/SortImage/index.tsx
index 83ed2846..8efa8ca4 100644
--- a/src/components/basic/Table/components/Toolbar/SortImage/index.tsx
+++ b/src/components/basic/Table/components/Toolbar/SortImage/index.tsx
@@ -26,7 +26,7 @@ interface SortIconProps {
   selected?: boolean
 }
 
-export default function SortImage({ onClick, selected }: SortIconProps) {
+export default function SortImage({ onClick, selected }: Readonly<SortIconProps>) {
   return (
     <Box
       sx={{
diff --git a/src/components/basic/Table/index.tsx b/src/components/basic/Table/index.tsx
index 0d20dbe3..7ca1a278 100644
--- a/src/components/basic/Table/index.tsx
+++ b/src/components/basic/Table/index.tsx
@@ -35,6 +35,7 @@ import { Typography } from '../Typography'
 import { Error500Overlay } from './components/Error/Error500Overlay'
 import { Error400Overlay } from './components/Error/Error400Overlay'
 import type { View } from '../ViewSelector'
+import { type SortOptionsType } from '../SortOption'
 
 export { StatusTag }
 export type toolbarType = 'basic' | 'premium' | 'ultimate' | 'searchAndFilter'
@@ -68,7 +69,7 @@ export interface TableProps extends DataGridProps {
   defaultFilter?: string
   filterViews?: View[]
   defaultSortOption?: string
-  sortOptions?: {label: string, value: string}[]
+  sortOptions?: SortOptionsType[]
   onSortClick?: (value: string) => void
   alignCell?: string
   error?: {