feat(ssi credential): added filters (#181)

DEPENDENCIES

@@ -1124,7 +1124,7 @@ npm/npmjs/@babel/template/7.22.5, MIT, approved, #9017
 npm/npmjs/@babel/traverse/7.22.5, MIT, approved, #8954
 npm/npmjs/@babel/types/7.22.5, MIT, approved, #8967
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/2.0.11, Apache-2.0 AND (BSD-3-Clause AND MIT), approved, #9187
+npm/npmjs/@catena-x/portal-shared-components/2.0.14, Apache-2.0 AND (BSD-3-Clause AND MIT), approved, #9187
 npm/npmjs/@csstools/normalize.css/12.0.0, CC0-1.0, approved, clearlydefined
 npm/npmjs/@csstools/postcss-cascade-layers/1.1.1, CC0-1.0, approved, clearlydefined
 npm/npmjs/@csstools/postcss-color-function/1.1.1, CC0-1.0 AND (MIT AND W3C-20150513) AND W3C-20150513 AND MIT, approved, #3022

package.json

@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^2.0.13",
+    "@catena-x/portal-shared-components": "^2.0.14",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

src/assets/locales/de/main.json

@@ -1493,7 +1493,7 @@
     },
     "adminCertificate": {
       "headline": "Credential Request Overview",
-      "search": "Suchen via Zertifikatstyp",
+      "search": "Suchen via Name der Firma",
       "tabs": {
         "all": "Alle",
         "open": "Offen",

src/assets/locales/en/main.json

@@ -1499,7 +1499,7 @@
     },
     "adminCertificate": {
       "headline": "Credential Request Overview",
-      "search": "...search for certificate type",
+      "search": "...search for Company Name",
       "tabs": {
         "all": "All",
         "open": "Open",

src/components/overlays/UpdateCertificate/index.tsx

@@ -66,7 +66,7 @@ export default function UpdateCertificate({ id }: { id: string }) {
         await addCertificate(data).unwrap()
         setSubmitClicked(true)
       }
-    } catch (err: unknown) {
+    } catch (err: any) {
       setLoading(false)
       error(
         t('content.certificates.updateCertificate.error') +

src/components/pages/AdminCredential/AdminCredentialElements.tsx

@@ -17,7 +17,7 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@mui/material'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
@@ -28,19 +28,15 @@ import {
   CredentialResponse,
   useApproveCredentialMutation,
   useDeclineCredentialMutation,
-  useFetchCredentialsQuery,
+  useFetchCredentialsSearchQuery,
 } from 'features/certification/certificationApiSlice'
 import { download } from 'utils/downloadUtils'
 import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice'
 import { error, success } from 'services/NotifyService'
 import { uniqueId } from 'lodash'
 import { SubscriptionStatus } from 'features/apps/apiSlice'
-
-export interface DummyData {
-  date: string
-  companyInfo: string
-  certificate: string
-}
+import { setSearchInput } from 'features/appManagement/actions'
+import { useDispatch } from 'react-redux'
 
 enum FilterType {
   ALL = 'all',
@@ -56,18 +52,45 @@ enum StatusType {
 
 export default function AdminCredentialElements() {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
 
-  const [group, setGroup] = useState<string>(FilterType.ALL)
-  const [expr, setExpr] = useState<string>('')
   const [refresh, setRefresh] = useState<number>(0)
+  const [group, setGroup] = useState<string>(FilterType.ALL)
+  const [searchExpr, setSearchExpr] = useState<string>('')
+  const [filterStatus, setFilterStatus] = useState<string>()
+  const [filterValueAPI, setFilterValueAPI] = useState<string>('')
+  const [fetchHookArgs, setFetchHookArgs] = useState({})
 
   const [getDocumentById] = useFetchNewDocumentByIdMutation()
   const [approveCredential] = useApproveCredentialMutation()
   const [declineCredential] = useDeclineCredentialMutation()
 
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     const viewValue = e.currentTarget.value
+    if (viewValue === FilterType.OPEN)
+      setFilterValueAPI(SubscriptionStatus.PENDING)
+    if (viewValue === FilterType.CONFIRMED)
+      setFilterValueAPI(SubscriptionStatus.ACTIVE)
+    if (viewValue === FilterType.DECLINED)
+      setFilterValueAPI(SubscriptionStatus.INACTIVE)
+    setFilterStatus(viewValue)
     setGroup(viewValue)
+    setRefresh(Date.now())
+  }
+
+  useEffect(() => {
+    if (onValidate(searchExpr)) {
+      setFetchHookArgs({
+        filterType: filterValueAPI,
+        expr: searchExpr,
+      })
+    }
+  }, [filterStatus, searchExpr])
+
+  const onValidate = (expr: string) => {
+    const validateExpr = /^[ A-Za-z0-9]{1,1000}$/.test(expr)
+    if (validateExpr) dispatch(setSearchInput({ open: true, text: expr }))
+    return validateExpr
   }
 
   const handleDownloadClick = async (
@@ -207,22 +230,23 @@ export default function AdminCredentialElements() {
   return (
     <div className="recommended-main">
       <PageLoadingTable<CredentialResponse[]>
+        searchExpr={searchExpr}
         alignCell="start"
         toolbarVariant={'searchAndFilter'}
         hasBorder={false}
         columnHeadersBackgroundColor={'transparent'}
-        searchExpr={expr}
         searchPlaceholder={t('content.adminCertificate.search')}
+        //searchInputData={searchInputData}
         onSearch={(expr: string) => {
-          if (expr !== '') return
+          if (!onValidate(expr)) return
           setRefresh(Date.now())
-          setExpr(expr)
+          setSearchExpr(expr)
         }}
         searchDebounce={1000}
         title=""
         loadLabel={t('global.actions.more')}
-        fetchHook={useFetchCredentialsQuery}
-        fetchHookArgs={{ expr }}
+        fetchHook={useFetchCredentialsSearchQuery}
+        fetchHookArgs={fetchHookArgs}
         fetchHookRefresh={refresh}
         getRowId={(row: { [key: string]: string }) => uniqueId(row.companyId)}
         columns={columns}

src/components/pages/AppMarketplace/components/AppListGroup/index.tsx

@@ -60,6 +60,7 @@ export const AppListGroup = ({
         items={itemsToShow}
         variant={'compact'}
         expandOnHover={true}
+        boxClickable={true}
       />
     </>
   )

src/components/pages/AppMarketplace/components/AppListGroupView/index.tsx

@@ -52,6 +52,7 @@ export const AppListGroupView = ({
           variant={'compact'}
           expandOnHover={true}
           imageLoader={fetchImageWithToken}
+          boxClickable={true}
         />
       </Box>
     )

src/features/certification/certificationApiSlice.tsx

@@ -20,6 +20,7 @@
 
 import { PaginFetchArgs } from '@catena-x/portal-shared-components'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { PAGE_SIZE } from 'types/Constants'
 import { apiBaseQuery } from 'utils/rtkUtil'
 
 export enum StatusEnum {
@@ -101,11 +102,17 @@ export const apiSlice = createApi({
       },
       invalidatesTags: ['certificate'],
     }),
-    fetchCredentials: builder.query<CredentialResponse[], PaginFetchArgs>({
-      query: (fetchArgs) => ({
-        url: `api/administration/companydata/credentials?page=${fetchArgs.page}`,
-      }),
-    }),
+    fetchCredentialsSearch: builder.query<CredentialResponse[], PaginFetchArgs>(
+      {
+        query: (fetchArgs) => ({
+          url: `api/administration/companydata/credentials?page=${
+            fetchArgs.page
+          }&size=${PAGE_SIZE}&companyName=${
+            fetchArgs.args.expr ?? ''
+          }&companySsiDetailStatusId=${fetchArgs.args.filterType ?? ''}`,
+        }),
+      }
+    ),
     approveCredential: builder.mutation<boolean, string>({
       query: (credentialId) => ({
         url: `api/administration/companydata/credentials/${credentialId}/approval`,
@@ -124,7 +131,7 @@ export const apiSlice = createApi({
 export const {
   useFetchCertificatesQuery,
   useAddCertificateMutation,
-  useFetchCredentialsQuery,
+  useFetchCredentialsSearchQuery,
   useApproveCredentialMutation,
   useDeclineCredentialMutation,
 } = apiSlice

yarn.lock

@@ -1175,10 +1175,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@catena-x/portal-shared-components@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-2.0.11.tgz#be7d24d78dc3844d53a77d03b6b25e8bb2e2a395"
-  integrity sha512-vFZEVlqfJS5H8VSTfWhXXlCFCbbxI66x1Fz/qw48Tp2H5h+5H83e0XcvyEePG2ldk3DvRJyl6eaZyJQ1Ncg/7w==
+"@catena-x/portal-shared-components@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-2.0.14.tgz#4892f23afedd03984e77a0e79312ceb1aed8fd8c"
+  integrity sha512-hjN1qx/N6I0P5UKzW5fTzgXGzjxJjfGJcBoltxq1FoB2jcN8ud4HlKPvVjYKNeRpEsA0WfQf9swFt6k3n4ldRg==
   dependencies:
     "@mui/base" "^5.0.0-beta.3"
     "@mui/system" "^5.13.2"