API Docs + Creation updates

src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts

@@ -90,7 +90,7 @@ export class DfApiDocsTableComponent extends DfManageTableComponent<ApiDocsRowDa
   }
 
   override mapDataToTable(data: Service[]): ApiDocsRowData[] {
-    const sortedData = data.sort((a, b) => a.id - b.id);
+    const sortedData = data.sort((a, b) => a.name.localeCompare(b.name));
     return sortedData.map(val => {
       const type = this.getServiceType(val.type);
       return {
@@ -114,7 +114,7 @@ export class DfApiDocsTableComponent extends DfManageTableComponent<ApiDocsRowDa
   ): void {
     this.servicesService
       .getAll<GenericListResponse<Service>>({
-        limit,
+        limit: 100 || limit,
         offset,
         filter: `(type not like "%swagger%")${filter ? ` and ${filter}` : ''}`,
       })

src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts

@@ -53,6 +53,16 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit {
       domNode: this.apiDocElement?.nativeElement,
       requestInterceptor: (req: SwaggerUI.Request) => {
         req['headers'][SESSION_TOKEN_HEADER] = this.userDataService.token;
+        // Parse the request URL
+        const url = new URL(req['url']);
+        const params = new URLSearchParams(url.search);
+        // Decode all parameters
+        params.forEach((value, key) => {
+          params.set(key, decodeURIComponent(value));
+        });
+        // Update the URL with decoded parameters
+        url.search = params.toString();
+        req['url'] = url.toString();
         return req;
       },
       showMutatedRequest: true,

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -349,7 +349,7 @@ <h4 class="text-center" style="color: black !important">
         <mat-accordion class="full-width">
           <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
             <mat-expansion-panel-header
-              >{{ 'services.options' | transloco }}s
+              >{{ 'services.options' | transloco }}
             </mat-expansion-panel-header>
             <div class="details-section">
               <ng-container *ngIf="this.isNetworkService">

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -284,8 +284,7 @@ export class DfServiceDetailsComponent implements OnInit {
       return;
     }
     const data = this.serviceForm.getRawValue();
-    data.service_doc_by_service_id.content = this.serviceDefinition;
-    data.service_doc_by_service_id.format = Number(this.serviceDefinitionType);
+
     type Params = {
       snackbarError: string;
       snackbarSuccess: string;
@@ -304,6 +303,12 @@ export class DfServiceDetailsComponent implements OnInit {
         fields: '*',
         related: 'service_doc_by_service_id',
       };
+      data.service_doc_by_service_id.content = this.serviceDefinition;
+      data.service_doc_by_service_id.format = Number(
+        this.serviceDefinitionType
+      );
+    } else {
+      delete data.service_doc_by_service_id; // Remove service_doc_by_service_id if it's not a network service
     }
 
     if (this.edit) {

src/app/routes.ts

@@ -270,7 +270,7 @@ export const routes: Routes = [
                 './adf-api-docs/df-api-docs/df-api-docs-table.component'
               ).then(m => m.DfApiDocsTableComponent),
             resolve: {
-              data: servicesResolver(10, '(type not like "%swagger%")'),
+              data: servicesResolver(100, '(type not like "%swagger%")'),
               serviceTypes: serviceTypesResolver,
             },
           },

src/app/shared/components/df-manage-table/df-manage-table.component.ts

@@ -7,7 +7,11 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent,
+} from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -81,6 +85,7 @@ export abstract class DfManageTableComponent<T>
   abstract columns: Array<Column<T>>;
 
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
   _activatedRoute = this.activatedRoute;
   _translateService = this.translateService;
 
@@ -123,6 +128,7 @@ export abstract class DfManageTableComponent<T>
         this.schema = this.router.url.includes('schema');
         if (data && data.resource) {
           this.dataSource.data = this.mapDataToTable(data.resource);
+          this.dataSource.paginator = this.paginator;
         }
         if (data && data.meta) {
           this.tableLength = data.meta.count;
@@ -143,6 +149,7 @@ export abstract class DfManageTableComponent<T>
 
   ngAfterViewInit(): void {
     this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
   }
 
   activeIcon(active: boolean): IconProp {
@@ -212,12 +219,14 @@ export abstract class DfManageTableComponent<T>
   }
 
   changePage(event: PageEvent): void {
-    if (event.previousPageIndex !== event.pageIndex) {
-      this.refreshTable(this.currentPageSize, event.pageIndex * event.pageSize);
-    } else {
-      this.currentPageSize = event.pageSize;
-      this.refreshTable(event.pageSize);
-    }
+    // if (event.previousPageIndex !== event.pageIndex) {
+    //   console.log(event);
+    //   this.refreshTable(undefined, event.pageIndex * event.pageSize);
+    // } else {
+    //   console.log(event);
+    //   this.currentPageSize = event.pageSize;
+    //   this.refreshTable(event.pageSize);
+    // }
   }
 
   createRow(): void {

src/app/shared/services/df-base-crud.service.ts

@@ -16,7 +16,7 @@ export class DfBaseCrudService {
     return this.http.get<T>(
       this.url,
       this.getOptions({
-        limit: 10,
+        limit: 100,
         offset: 0,
         includeCount: true,
         ...options,

src/app/shared/utilities/case.ts

@@ -19,6 +19,27 @@ export function mapSnakeToCamel<T>(obj: T): T {
   }
 }
 
+// export const camelToSnakeString = (str: string) =>
+//   str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1_$2').toLowerCase();
+
+// export function mapCamelToSnake<T>(obj: T): T {
+//   if (Array.isArray(obj)) {
+//     return obj.map(item => mapCamelToSnake(item)) as unknown as T;
+//   } else if (typeof obj === 'object' && obj !== null) {
+//     const newObj: Record<string, unknown> = {};
+//     for (const key in obj) {
+//       if (Object.prototype.hasOwnProperty.call(obj, key)) {
+//         newObj[camelToSnakeString(key)] = mapCamelToSnake(
+//           (obj as Record<string, unknown>)[key]
+//         );
+//       }
+//     }
+//     return newObj as unknown as T;
+//   } else {
+//     return obj;
+//   }
+// }
+
 export const camelToSnakeString = (str: string) =>
   str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1_$2').toLowerCase();
 
@@ -29,9 +50,13 @@ export function mapCamelToSnake<T>(obj: T): T {
     const newObj: Record<string, unknown> = {};
     for (const key in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        newObj[camelToSnakeString(key)] = mapCamelToSnake(
-          (obj as Record<string, unknown>)[key]
-        );
+        if (key === 'requestBody') {
+          newObj[key] = (obj as Record<string, unknown>)[key];
+        } else {
+          newObj[camelToSnakeString(key)] = mapCamelToSnake(
+            (obj as Record<string, unknown>)[key]
+          );
+        }
       }
     }
     return newObj as unknown as T;