fix scroll for rating & maxLenght for additional fields

Author: Awakich

projects/social_platform/src/app/office/program/detail/list/list.component.ts

@@ -152,12 +152,17 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
       const scrollEvent$ = fromEvent(target, "scroll")
         .pipe(
           debounceTime(this.listType === "rating" ? 200 : 500),
-          concatMap(() => this.onScroll()),
-          throttleTime(this.listType === "rating" ? 2000 : 500)
+          switchMap(() => this.onScroll()),
+          catchError(err => {
+            console.error("Scroll error:", err);
+            return of({});
+          })
         )
         .subscribe(noop);
 
       this.subscriptions$.push(scrollEvent$);
+    } else {
+      console.error(".office__body element not found");
     }
   }
 
@@ -220,21 +225,17 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
 
     const filtersObservable$ = this.route.queryParams
       .pipe(
+        distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),
         concatMap(q => {
           const { filters, extraParams } = this.buildFilterQuery(q);
           const programId = this.route.parent?.snapshot.params["programId"];
 
-          const filtersChanged =
-            JSON.stringify(filters) !== JSON.stringify(this.previousReqQuery["filters"]);
-          const extraParamsChanged =
-            JSON.stringify(extraParams) !== JSON.stringify(this.previousReqQuery["filters"]);
-
-          this.previousReqQuery = { filters, extraParams };
+          this.listPage = 0;
 
           const params = new HttpParams({
             fromObject: {
-              offset: 0,
-              limit: this.itemsPerPage,
+              offset: "0",
+              limit: this.itemsPerPage.toString(),
               ...extraParams,
             },
           });
@@ -243,22 +244,24 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
             if (Object.keys(filters).length > 0) {
               return this.projectRatingService.postFilters(programId, filters, params);
             }
-
             return this.projectRatingService.getAll(programId, params);
           }
 
           if (Object.keys(filters).length > 0) {
-            return this.programService.createProgramFilters(programId, filters);
+            return this.programService.createProgramFilters(programId, filters, params);
           }
-
           return this.programService.getAllProjects(programId, params);
+        }),
+        catchError(err => {
+          console.error("Error in setupFilters:", err);
+          return of({ count: 0, results: [] });
         })
       )
       .subscribe(result => {
         if (!result) return;
 
-        this.list = result.results;
-        this.searchedList = result.results;
+        this.list = result.results || [];
+        this.searchedList = result.results || [];
         this.listTotalCount = result.count;
         this.listPage = 0;
         this.cdref.detectChanges();
@@ -269,114 +272,205 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   // Универсальный метод скролла
   private onScroll() {
-    if (this.listTotalCount && this.list.length >= this.listTotalCount) return of({});
+    if (this.listTotalCount && this.list.length >= this.listTotalCount) {
+      console.log("All items loaded");
+      return of({});
+    }
 
     const target = document.querySelector(".office__body");
-    if (!target || (this.listType !== "rating" && !this.listRoot)) return of({});
+    if (!target) {
+      console.log("Target not found");
+      return of({});
+    }
 
     let shouldFetch = false;
 
     if (this.listType === "rating") {
-      // Логика для rating
       const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
-      shouldFetch = scrollBottom <= 0;
+      shouldFetch = scrollBottom <= 200;
+      console.log("Rating scroll check:", { scrollBottom, shouldFetch });
     } else {
-      // Логика для projects и members
+      if (!this.listRoot) return of({});
       const diff =
         target.scrollTop -
-        this.listRoot!.nativeElement.getBoundingClientRect().height +
+        this.listRoot.nativeElement.getBoundingClientRect().height +
         window.innerHeight;
       const threshold = this.listType === "projects" ? -200 : 0;
       shouldFetch = diff > threshold;
+      console.log("Projects/Members scroll check:", { diff, threshold, shouldFetch });
     }
 
     if (shouldFetch) {
+      console.log("Fetching next page:", this.listPage + 1);
       this.listPage++;
       return this.onFetch();
     }
 
     return of({});
   }
 
+  // Универсальный метод загрузки данных
   // Универсальный метод загрузки данных
   private onFetch() {
     const programId = this.route.parent?.snapshot.params["programId"];
     const offset = this.listPage * this.itemsPerPage;
 
+    console.log("onFetch called:", {
+      listType: this.listType,
+      programId,
+      offset,
+      itemsPerPage: this.itemsPerPage,
+      currentPage: this.listPage,
+      currentListLength: this.list.length,
+    });
+
+    // Получаем текущие query параметры для фильтров
+    const currentQuery = this.route.snapshot.queryParams;
+    const { filters, extraParams } = this.buildFilterQuery(currentQuery);
+
+    const params = new HttpParams({
+      fromObject: {
+        offset: offset.toString(),
+        limit: this.itemsPerPage.toString(),
+        ...extraParams,
+      },
+    });
+
+    console.log("Request params:", { filters, extraParams, paramsKeys: params.keys() });
+
     switch (this.listType) {
-      case "projects":
-        return this.programService
-          .getAllProjects(
-            programId,
-            new HttpParams({ fromObject: { offset, limit: this.itemsPerPage } })
-          )
-          .pipe(
-            tap((projects: ApiPagination<Project>) => {
-              this.listTotalCount = projects.count;
-              if (this.listPage === 0) {
-                this.list = projects.results;
-              } else {
-                this.list = [...this.list, ...projects.results];
-              }
-              this.searchedList = this.list;
-              this.cdref.detectChanges();
-            })
-          );
+      case "rating": {
+        const ratingRequest$ =
+          Object.keys(filters).length > 0
+            ? this.projectRatingService.postFilters(programId, filters, params)
+            : this.projectRatingService.getAll(programId, params);
+
+        return ratingRequest$.pipe(
+          tap(({ count, results }) => {
+            console.log("Rating response:", {
+              count,
+              resultsLength: results.length,
+              currentListLength: this.list.length,
+              offset,
+              expectedNewLength: this.list.length + results.length,
+            });
+
+            this.listTotalCount = count;
 
-      case "members":
+            if (this.listPage === 0) {
+              this.list = results;
+            } else {
+              const newResults = results.filter(
+                newItem => !this.list.some(existingItem => existingItem.id === newItem.id)
+              );
+              console.log("New unique items to add:", newResults.length);
+              this.list = [...this.list, ...newResults];
+            }
+
+            this.searchedList = this.list;
+            this.cdref.detectChanges();
+          }),
+          catchError(err => {
+            console.error("Error fetching ratings:", err);
+            this.listPage--;
+            return of({ count: this.listTotalCount || 0, results: [] });
+          })
+        );
+      }
+
+      case "projects": {
+        const projectsRequest$ =
+          Object.keys(filters).length > 0
+            ? this.programService.createProgramFilters(programId, filters, params)
+            : this.programService.getAllProjects(programId, params);
+
+        return projectsRequest$.pipe(
+          tap((projects: ApiPagination<Project>) => {
+            console.log("Projects response:", {
+              count: projects.count,
+              resultsLength: projects.results.length,
+              currentListLength: this.list.length,
+              offset,
+            });
+
+            this.listTotalCount = projects.count;
+
+            if (this.listPage === 0) {
+              this.list = projects.results;
+            } else {
+              const newResults = projects.results.filter(
+                newItem => !this.list.some(existingItem => existingItem.id === newItem.id)
+              );
+              console.log("New unique projects to add:", newResults.length);
+              this.list = [...this.list, ...newResults];
+            }
+
+            this.searchedList = this.list;
+            this.cdref.detectChanges();
+          }),
+          catchError(err => {
+            console.error("Error fetching projects:", err);
+            this.listPage--;
+            return of({ count: this.listTotalCount || 0, results: [] });
+          })
+        );
+      }
+
+      case "members": {
         return this.programService.getAllMembers(programId, offset, this.itemsPerPage).pipe(
           tap((members: ApiPagination<User>) => {
+            console.log("Members response:", {
+              count: members.count,
+              resultsLength: members.results.length,
+              currentListLength: this.list.length,
+              offset,
+            });
+
             this.listTotalCount = members.count;
+
             if (this.listPage === 0) {
               this.list = members.results;
             } else {
-              this.list = [...this.list, ...members.results];
+              const newResults = members.results.filter(
+                newItem => !this.list.some(existingItem => existingItem.id === newItem.id)
+              );
+              console.log("New unique members to add:", newResults.length);
+              this.list = [...this.list, ...newResults];
             }
+
             this.searchedList = this.list;
             this.cdref.detectChanges();
+          }),
+          catchError(err => {
+            console.error("Error fetching members:", err);
+            this.listPage--;
+            return of({ count: this.listTotalCount || 0, results: [] });
           })
         );
-
-      case "rating":
-        return this.projectRatingService
-          .getAll(programId, new HttpParams({ fromObject: { offset, limit: this.itemsPerPage } }))
-          .pipe(
-            tap(({ count, results }) => {
-              this.listTotalCount = count;
-              if (this.listPage === 0) {
-                this.list = results;
-              } else {
-                this.list = [...this.list, ...results];
-              }
-              this.searchedList = this.list;
-              this.cdref.detectChanges();
-            })
-          );
+      }
 
       default:
-        return of({});
+        return of({ count: 0, results: [] });
     }
   }
 
   // Построение запроса для фильтров (кроме участников)
-  private buildFilterQuery(q: any): Record<string, any> {
-    if (this.listType === "members") return {};
+  private buildFilterQuery(q: any): {
+    filters: Record<string, any>;
+    extraParams: Record<string, any>;
+  } {
+    if (this.listType === "members") return { filters: {}, extraParams: {} };
 
-    const filters: Record<string, any[]> = {};
+    const filters: Record<string, any> = {};
     const extraParams: Record<string, any> = {};
 
+    console.log("buildFilterQuery input:", q);
+
     Object.keys(q).forEach(key => {
       const value = q[key];
-      if (value === undefined || value === "") return;
-
-      // ⭐ Для rating search → name__contains
-      if (this.listType === "rating" && key === "search") {
-        extraParams["name__contains"] = value;
-        return;
-      }
+      if (value === undefined || value === "" || value === null) return;
 
-      // ⭐ Эти два ключа должны идти ТОЛЬКО как GET-параметры
-      if (this.listType === "rating" && key === "name__contains") {
+      if (this.listType === "rating" && (key === "search" || key === "name__contains")) {
         extraParams["name__contains"] = value;
         return;
       }
@@ -386,7 +480,6 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
         return;
       }
 
-      // ⭐ Для других ключей: обычные filters
       filters[key] = Array.isArray(value) ? value : [value];
     });
 
@@ -460,7 +553,7 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private get itemsPerPage(): number {
     return this.listType === "rating"
-      ? 8
+      ? 10
       : this.listType === "projects"
       ? this.perPage
       : this.listTake;

projects/social_platform/src/app/office/projects/edit/services/project-additional.service.ts

@@ -239,10 +239,10 @@ export class ProjectAdditionalService {
 
     switch (field.fieldType) {
       case "text":
-        control.addValidators([Validators.maxLength(50)]);
+        control.addValidators([Validators.maxLength(500)]);
         break;
       case "textarea":
-        control.addValidators([Validators.maxLength(100)]);
+        control.addValidators([Validators.maxLength(300)]);
         break;
     }
   }