feat(company subscriptions): update API with filter options (#1062)

CHANGELOG.md

@@ -28,6 +28,8 @@
   - update the status(skipped) in application requests and necessary changes with checkbox in connector management [#1019](https://github.com/eclipse-tractusx/portal-frontend/pull/1019)
 - **Technical User Management**
   - Removed 'Inactive' filter in technical user management [#1046](https://github.com/eclipse-tractusx/portal-frontend/pull/1046)
+- **Company Subscriptions**
+  - Update and bind API with filter options [#1062](https://github.com/eclipse-tractusx/portal-frontend/pull/1062)
 
 ### Bugfixes
 

src/assets/locales/de/main.json

@@ -460,9 +460,10 @@
         "action": "Aktion"
       },
       "filter": {
-        "requested": "angefordert",
+        "pending": "ausstehend",
         "active": "aktiv",
-        "showAll": "zeige alles"
+        "inactive": "inaktiv",
+        "showAll": "Alles anzeigen"
       }
     },
     "appOverview": {

src/assets/locales/en/main.json

@@ -456,8 +456,9 @@
         "action": "Action"
       },
       "filter": {
-        "requested": "requested",
+        "pending": "pending",
         "active": "active",
+        "inactive": "inactive",
         "showAll": "show all"
       }
     },

src/components/pages/CompanySubscriptions/index.tsx

@@ -40,7 +40,7 @@ import {
 import { CompanySubscriptionsTableColumns } from './CompanySubscriptionsTableColumns'
 
 interface FetchHookArgsType {
-  statusFilter: string
+  statusId: string
   expr: string
 }
 
@@ -50,7 +50,9 @@ export default function CompanySubscriptions() {
   const [refresh, setRefresh] = useState(0)
   const [searchExpr, setSearchExpr] = useState<string>('')
   const [fetchHookArgs, setFetchHookArgs] = useState<FetchHookArgsType>()
-  const [filterStatus, setFilterStatus] = useState<string>('')
+  const [filterStatus, setFilterStatus] = useState<string>(
+    CompanySubscriptionFilterType.SHOW_ALL
+  )
   const searchInputData = useSelector(updateApplicationRequestSelector)
   const [group, setGroup] = useState<string>(
     t('content.companySubscriptions.filter.showAll')
@@ -72,15 +74,20 @@ export default function CompanySubscriptions() {
 
   const filterView = [
     {
-      buttonText: t('content.companySubscriptions.filter.requested'),
-      buttonValue: CompanySubscriptionFilterType.REQUESTED,
+      buttonText: t('content.companySubscriptions.filter.pending'),
+      buttonValue: CompanySubscriptionFilterType.PENDING,
       onButtonClick: setView,
     },
     {
       buttonText: t('content.companySubscriptions.filter.active'),
       buttonValue: CompanySubscriptionFilterType.ACTIVE,
       onButtonClick: setView,
     },
+    {
+      buttonText: t('content.companySubscriptions.filter.inactive'),
+      buttonValue: CompanySubscriptionFilterType.INACTIVE,
+      onButtonClick: setView,
+    },
     {
       buttonText: t('content.companySubscriptions.filter.showAll'),
       buttonValue: CompanySubscriptionFilterType.SHOW_ALL,
@@ -89,12 +96,10 @@ export default function CompanySubscriptions() {
   ]
 
   useEffect(() => {
-    if (onValidate(searchExpr)) {
-      setFetchHookArgs({
-        statusFilter: filterStatus,
-        expr: searchExpr,
-      })
-    }
+    setFetchHookArgs({
+      statusId: filterStatus,
+      expr: searchExpr,
+    })
   }, [filterStatus, searchExpr])
 
   const onValidate = (expr: string) => {

src/features/apps/apiSlice.ts

@@ -42,6 +42,7 @@ import {
   type FetchSubscriptionAppQueryType,
   type SubscribedActiveApps,
   StatusIdEnum,
+  CompanySubscriptionFilterType,
 } from './types'
 
 export const apiSlice = createApi({
@@ -164,9 +165,16 @@ export const apiSlice = createApi({
       PaginResult<SubscribedActiveApps>,
       PaginFetchArgs
     >({
-      query: (fetchArgs) => ({
-        url: `/api/Apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${fetchArgs.page}`,
-      }),
+      query: (fetchArgs) => {
+        if (
+          fetchArgs.args.statusId &&
+          fetchArgs.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
+        ) {
+          return `/api/Apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${fetchArgs.page}&statusId=${fetchArgs.args.statusId}`
+        } else {
+          return `/api/Apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${fetchArgs.page}`
+        }
+      },
     }),
   }),
 })

src/features/apps/types.ts

@@ -251,8 +251,9 @@ export const initialState: AppsControlState = {
 }
 
 export enum CompanySubscriptionFilterType {
-  REQUESTED = 'requested',
+  PENDING = 'pending',
   ACTIVE = 'active',
+  INACTIVE = 'inactive',
   SHOW_ALL = 'show all',
 }