feat(admin credential): adjust document data and sorting (#748)

#620
eclipse-tractusx · May 2, 2024 · 5fb1a5a · 5fb1a5a
1 parent ec31cc2
commit 5fb1a5a
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 62 deletions.
diff --git a/DEPENDENCIES b/DEPENDENCIES
@@ -599,7 +599,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.4, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.0.7, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.4",
+    "@catena-x/portal-shared-components": "^3.0.7",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -1746,13 +1746,14 @@
       "search": "Suchen via Name der Firma",
       "tabs": {
         "all": "Alle",
-        "open": "Offen",
-        "confirmed": "Bestätigt",
-        "declined": "Abgelehnt"
+        "pending": "Ausstehend",
+        "active": "Aktiv",
+        "inactive": "Inaktiv",
+        "revoked": "Widerrufen"
       },
-      "sortOptions": {
-        "name": "Company Name",
-        "date": "Date"
+      "sort": {
+        "bpnlasc": "Business Partner Asc",
+        "bpnldesc": "Business Partner Desc"
       },
       "table": {
         "crendentialType": "Type",

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -1817,13 +1817,14 @@
       "search": "...search for Company Name",
       "tabs": {
         "all": "All",
-        "open": "Open",
-        "confirmed": "Confirmed",
-        "declined": "Declined"
+        "pending": "Pending",
+        "active": "Active",
+        "inactive": "Inactive",
+        "revoked": "Revoked"
       },
-      "sortOptions": {
-        "name": "By Name",
-        "date": "By Date"
+      "sort": {
+        "bpnlasc": "Business Partner Asc",
+        "bpnldesc": "Business Partner Desc"
       },
       "table": {
         "crendentialType": "Type",

diff --git a/src/components/pages/AdminCredential/AdminCredential.scss b/src/components/pages/AdminCredential/AdminCredential.scss
@@ -57,6 +57,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    margin-right: 10px;
     .document-icon {
       color: #1977cc;
       font-size: 20px;

diff --git a/src/components/pages/AdminCredential/AdminCredentialElements.tsx b/src/components/pages/AdminCredential/AdminCredentialElements.tsx
@@ -43,27 +43,35 @@ import {
 
 interface FetchHookArgsType {
   filterType: string
+  sortingType?: string
   expr: string
 }
 
 enum FilterType {
-  ALL = 'all',
-  OPEN = 'open',
-  CONFIRMED = 'confirmed',
-  DECLINED = 'declined',
+  ALL = '',
+  PENDING = 'PENDING',
+  ACTIVE = 'ACTIVE',
+  REVOKED = 'REVOKED',
+  INACTIVE = 'INACTIVE',
 }
 
 enum StatusType {
   APPROVE = 'approve',
   DECLINE = 'decline',
 }
 
+enum SortType {
+  BPNLASC = 'BpnlAsc',
+  BPNLDESC = 'BpnlDesc',
+}
+
 export default function AdminCredentialElements() {
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
   const [refresh, setRefresh] = useState<number>(0)
   const [group, setGroup] = useState<string>(FilterType.ALL)
+  const [sortOption, setSortOption] = useState<string>(SortType.BPNLASC)
   const [searchExpr, setSearchExpr] = useState<string>('')
   const [filterValueAPI, setFilterValueAPI] = useState<string>('')
   const [fetchHookArgs, setFetchHookArgs] = useState<FetchHookArgsType>()
@@ -76,23 +84,19 @@ export default function AdminCredentialElements() {
 
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     const viewValue = e.currentTarget.value
-    if (viewValue === FilterType.OPEN)
-      setFilterValueAPI(SubscriptionStatus.PENDING)
-    else if (viewValue === FilterType.CONFIRMED)
-      setFilterValueAPI(SubscriptionStatus.ACTIVE)
-    else if (viewValue === FilterType.DECLINED)
-      setFilterValueAPI(SubscriptionStatus.INACTIVE)
-    else setFilterValueAPI('')
+    setFilterValueAPI(viewValue)
     setGroup(viewValue)
     setRefresh(Date.now())
   }
 
   useEffect(() => {
+    console.log('sortOption', sortOption)
     setFetchHookArgs({
       filterType: filterValueAPI,
+      sortingType: sortOption,
       expr: searchExpr,
     })
-  }, [filterValueAPI, searchExpr])
+  }, [filterValueAPI, sortOption, searchExpr])
 
   const onValidate = (expr: string) => {
     const validateExpr = /^[ A-Za-z0-9]{1,1000}$/.test(expr)
@@ -145,22 +149,38 @@ export default function AdminCredentialElements() {
       onButtonClick: setView,
     },
     {
-      buttonText: t('content.adminCertificate.tabs.open'),
-      buttonValue: FilterType.OPEN,
+      buttonText: t('content.adminCertificate.tabs.pending'),
+      buttonValue: FilterType.PENDING,
+      onButtonClick: setView,
+    },
+    {
+      buttonText: t('content.adminCertificate.tabs.active'),
+      buttonValue: FilterType.ACTIVE,
       onButtonClick: setView,
     },
     {
-      buttonText: t('content.adminCertificate.tabs.confirmed'),
-      buttonValue: FilterType.CONFIRMED,
+      buttonText: t('content.adminCertificate.tabs.revoked'),
+      buttonValue: FilterType.REVOKED,
       onButtonClick: setView,
     },
     {
-      buttonText: t('content.adminCertificate.tabs.declined'),
-      buttonValue: FilterType.DECLINED,
+      buttonText: t('content.adminCertificate.tabs.inactive'),
+      buttonValue: FilterType.INACTIVE,
       onButtonClick: setView,
     },
   ]
 
+  const sortOptions = [
+    {
+      label: t('content.adminCertificate.sort.bpnlasc'),
+      value: SortType.BPNLASC,
+    },
+    {
+      label: t('content.adminCertificate.sort.bpnldesc'),
+      value: SortType.BPNLDESC,
+    },
+  ]
+
   const columns = [
     {
       field: 'credentialType',
@@ -184,22 +204,25 @@ export default function AdminCredentialElements() {
       field: 'document',
       headerName: t('content.adminCertificate.table.document'),
       flex: 1.5,
-      renderCell: ({ row }: { row: CredentialData }) => (
-        <div className="documenticon-main">
-          <ArticleOutlinedIcon
-            className={`${
-              row.document.documentId ? 'document-icon' : 'document-disabled'
-            }`}
-            onClick={() =>
-              row.document.documentId &&
-              handleDownloadClick(
-                row.document.documentId,
-                row.document.documentName
-              )
-            }
-          />
-        </div>
-      ),
+      renderCell: ({ row }: { row: CredentialData }) =>
+        row.documents?.map((document) => {
+          return (
+            <div className="documenticon-main" key={document.documentId}>
+              <ArticleOutlinedIcon
+                className={`${
+                  document.documentId ? 'document-icon' : 'document-disabled'
+                }`}
+                onClick={() =>
+                  document.documentId &&
+                  handleDownloadClick(
+                    document.documentId,
+                    document.documentName
+                  )
+                }
+              />
+            </div>
+          )
+        }),
     },
     {
       field: 'credentialDetailId',
@@ -290,6 +313,11 @@ export default function AdminCredentialElements() {
         columns={columns}
         defaultFilter={group}
         filterViews={filterButtons}
+        defaultSortOption={sortOption}
+        sortOptions={sortOptions}
+        onSortClick={(value) => {
+          setSortOption(value)
+        }}
       />
     </div>
   )

diff --git a/src/components/pages/AppUserManagement/components/AppUserDetailsTable/index.tsx b/src/components/pages/AppUserManagement/components/AppUserDetailsTable/index.tsx
@@ -35,7 +35,7 @@ export const AppUserDetailsTable = ({
   roles,
   userRoleResponse,
 }: {
-  roles?: AppRole[]
+  roles: AppRole[] | undefined
   userRoleResponse: string
 }) => {
   const { t } = useTranslation()
@@ -48,9 +48,9 @@ export const AppUserDetailsTable = ({
       sectionTitle={'content.usermanagement.appUserDetails.subheadline'}
       addButtonLabel={'content.usermanagement.appUserDetails.table.add'}
       addButtonClick={() => dispatch(show(OVERLAYS.ADD_APP_USER_ROLES, appId))}
-      addButtonDisabled={!roles}
+      addButtonDisabled={roles && roles?.length <= 0}
       addButtonTooltip={
-        !roles
+        roles && roles?.length <= 0
           ? t('content.usermanagement.appUserDetails.table.buttonTooltip')
           : ''
       }

diff --git a/src/features/certification/certificationApiSlice.tsx b/src/features/certification/certificationApiSlice.tsx
@@ -62,10 +62,10 @@ export type CredentialData = {
   useCase: string
   participantStatus: string
   expiryDate: string
-  document: {
+  documents: Array<{
     documentId: string
     documentName: string
-  }
+  }>
   externalTypeDetail: {
     id: string
     verifiedCredentialExternalTypeId: string
@@ -105,11 +105,19 @@ export const apiSlice = createApi({
     }),
     fetchCredentialsSearch: builder.query<CredentialResponse[], PaginFetchArgs>(
       {
-        query: (fetchArgs) => ({
-          url: `${getSsiBase()}/api/issuer?page=${
-            fetchArgs.page
-          }&size=${PAGE_SIZE}`,
-        }),
+        query: (fetchArgs) => {
+          if (fetchArgs.args.filterType && fetchArgs.args.sortingType) {
+            return `${getSsiBase()}/api/issuer?page=${
+              fetchArgs.page
+            }&size=${PAGE_SIZE}&sorting=${
+              fetchArgs.args.sortingType ?? ''
+            }&companySsiDetailStatusId=${fetchArgs.args.filterType}`
+          } else {
+            return `${getSsiBase()}/api/issuer?page=${
+              fetchArgs.page
+            }&size=${PAGE_SIZE}`
+          }
+        },
       }
     ),
     approveCredential: builder.mutation<boolean, string>({

diff --git a/yarn.lock b/yarn.lock
@@ -336,10 +336,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@catena-x/portal-shared-components@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.4.tgz#d4121f48c6bba0e1ce1ae8b816f64b74be50eb89"
-  integrity sha512-83ztMjPKT77qCFqnkbj9sDhxvOBh9yL4Ck2yScz9TWfHGilyDKwU9D9HWVLxASgaSNs4Q6f5/t4jl/bZZYLm8g==
+"@catena-x/portal-shared-components@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.7.tgz#587c7cb83f84408c18500f5e6cb28a60e283e6af"
+  integrity sha512-mG3NUQajZquSnCWvcQ0jKR3tUkRi5JXBEtFTmjQln+MxnukLXcr7zyEfUT5P9tevlkc4qhHIZs/iAbAt2dgc8Q==
   dependencies:
     "@date-io/date-fns" "^3.0.0"
     "@emotion/react" "^11.11.4"