add file-item in response card, edit in profile, add delete file in file-item component, add modal for user achievements

Author: Awakich

projects/social_platform/src/app/auth/models/user.model.ts

@@ -1,6 +1,7 @@
 /** @format */
 
 import { Project } from "@models/project.model";
+import { FileModel } from "@office/models/file.model";
 import { Skill } from "@office/models/skill";
 import { Program } from "@office/program/models/program.model";
 
@@ -25,7 +26,7 @@ export class Achievement {
   title!: string;
   status!: string;
   year!: number;
-  files!: string[];
+  files!: string[] | FileModel[];
 }
 
 export class Education {

projects/social_platform/src/app/office/features/response-card/response-card.component.html

@@ -14,7 +14,8 @@
 
     @if(response.accompanyingFile){
     <app-file-item
-      class="text__file"
+      class="response__file"
+      [canDelete]="true"
       [link]="response.accompanyingFile.link"
       [name]="response.accompanyingFile.name"
       [type]="response.accompanyingFile.mimeType"

projects/social_platform/src/app/office/features/response-card/response-card.component.scss

@@ -14,6 +14,10 @@
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
   }
+
+  &__file {
+    margin-top: 4px;
+  }
 }
 
 .lists {

projects/social_platform/src/app/office/features/response-card/response-card.component.ts

@@ -39,17 +39,7 @@ import { IconComponent } from "@uilib";
   templateUrl: "./response-card.component.html",
   styleUrl: "./response-card.component.scss",
   standalone: true,
-  imports: [
-    RouterLink,
-    AvatarComponent,
-    TagComponent,
-    IconComponent,
-    ButtonComponent,
-    UserRolePipe,
-    AsyncPipe,
-    FileItemComponent,
-    ProjectVacancyCardComponent,
-  ],
+  imports: [IconComponent, FileItemComponent],
 })
 export class ResponseCardComponent implements OnInit {
   constructor(private readonly authService: AuthService) {}

projects/social_platform/src/app/office/feed/feed.component.ts

@@ -3,6 +3,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   inject,
@@ -58,10 +59,12 @@ import { OpenVacancyComponent } from "./shared/open-vacancy/open-vacancy.compone
   styleUrl: "./feed.component.scss",
 })
 export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
-  route = inject(ActivatedRoute);
-  projectNewsService = inject(ProjectNewsService);
-  profileNewsService = inject(ProfileNewsService);
-  feedService = inject(FeedService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly projectNewsService = inject(ProjectNewsService);
+  private readonly profileNewsService = inject(ProfileNewsService);
+  private readonly feedService = inject(FeedService);
+  private readonly cdref = inject(ChangeDetectorRef);
+  private observer?: IntersectionObserver;
 
   /**
    * ИНИЦИАЛИЗАЦИЯ КОМПОНЕНТА
@@ -71,49 +74,36 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
    * - Настраивает наблюдение за изменениями фильтров
    * - Инициализирует отслеживание просмотров элементов
    */
+  /**
+   * ИНИЦИАЛИЗАЦИЯ КОМПОНЕНТА
+   */
   ngOnInit() {
-    // Получаем предзагруженные данные из резолвера
     const routeData$ = this.route.data
       .pipe(map(r => r["data"]))
       .subscribe((feed: ApiPagination<FeedItem>) => {
         this.feedItems.set(feed.results);
         this.totalItemsCount.set(feed.count);
 
-        // Настраиваем отслеживание просмотров элементов
-        setTimeout(() => {
-          const observer = new IntersectionObserver(this.onFeedItemView.bind(this), {
-            root: document.querySelector(".office__body"),
-            rootMargin: "0px 0px 0px 0px",
-            threshold: 0,
-          });
-
-          document.querySelectorAll(".page__item").forEach(e => {
-            observer.observe(e);
-          });
-        });
+        this.initObserver();
       });
     this.subscriptions$().push(routeData$);
 
-    // Отслеживаем изменения параметров фильтрации
     const queryParams$ = this.route.queryParams
       .pipe(
-        map(params => params["includes"]),
-        tap(includes => {
-          this.includes.set(includes);
-        }),
+        map(p => p["includes"]),
+        tap(includes => this.includes.set(includes)),
         skip(1),
         concatMap(includes => {
           this.totalItemsCount.set(0);
-          this.feedPage.set(0);
-
+          this.feedPage.set(1);
           return this.onFetch(0, this.perFetchTake(), includes ?? ["vacancy", "projects", "news"]);
         })
       )
       .subscribe(feed => {
         this.feedItems.set(feed);
-
         setTimeout(() => {
-          this.feedRoot?.nativeElement.children[0].scrollIntoView({ behavior: "smooth" });
+          this.feedRoot?.nativeElement.scrollTo({ top: 0 });
+          this.observeNewElements();
         });
       });
     this.subscriptions$().push(queryParams$);
@@ -132,7 +122,7 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
       const scrollEvents$ = fromEvent(target, "scroll")
         .pipe(
           concatMap(() => this.onScroll()),
-          throttleTime(500) // Ограничиваем частоту запросов
+          throttleTime(500)
         )
         .subscribe(noop);
 
@@ -141,7 +131,8 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.subscriptions$().forEach($ => $.unsubscribe());
+    this.subscriptions$().forEach(s => s.unsubscribe());
+    this.observer?.disconnect();
   }
 
   @ViewChild("feedRoot") feedRoot?: ElementRef<HTMLElement>;
@@ -224,7 +215,7 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
    * - Отмечает новости как прочитанные при попадании в область видимости
    * - Различает новости проектов и профилей
    */
-  onFeedItemView(entries: IntersectionObserverEntry[]): void {
+  private onFeedItemView(entries: IntersectionObserverEntry[]): void {
     const items = entries
       .map(e => {
         return Number((e.target as HTMLElement).dataset["id"]);
@@ -266,33 +257,41 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
    * - Проверяет, достигнут ли конец списка
    * - Загружает следующую порцию элементов при необходимости
    */
-  onScroll() {
-    // Проверяем, загружены ли все элементы
-    if (this.totalItemsCount() && this.feedItems().length >= this.totalItemsCount()) return of({});
+  /**
+   * ОБРАБОТКА ПРОКРУТКИ ДЛЯ БЕСКОНЕЧНОЙ ЗАГРУЗКИ
+   */
+  private onScroll() {
+    const container = document.querySelector(".office__body") as HTMLElement;
+    if (!container) return of({});
 
-    const target = document.querySelector(".office__body");
-    if (!target || !this.feedRoot) return of({});
+    const isNearBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight < 100;
 
-    // Вычисляем, нужно ли загружать новые элементы
-    const diff =
-      target.scrollTop -
-      this.feedRoot.nativeElement.getBoundingClientRect().height +
-      window.innerHeight;
+    if (!isNearBottom) return of({});
 
-    if (diff > 0) {
-      return this.onFetch(
-        this.feedPage() * this.perFetchTake(),
-        this.perFetchTake(),
-        this.includes()
-      ).pipe(
-        tap((feedChunk: FeedItem[]) => {
-          this.feedPage.update(page => page + 1);
-          this.feedItems.update(items => [...items, ...feedChunk]);
-        })
-      );
+    // Предотвращаем множественные запросы
+    if (this.feedItems().length >= this.totalItemsCount()) {
+      return of([]);
     }
 
-    return of({});
+    return this.onFetch(
+      this.feedPage() * this.perFetchTake(),
+      this.perFetchTake(),
+      this.includes()
+    ).pipe(
+      tap((feedChunk: FeedItem[]) => {
+        if (feedChunk.length > 0) {
+          this.feedPage.update(p => p + 1);
+          this.feedItems.update(items => [...items, ...feedChunk]);
+
+          // ВАЖНО: обновляем observer после добавления новых элементов
+          setTimeout(() => {
+            this.observeNewElements();
+            this.cdref.detectChanges();
+          }, 0);
+        }
+      })
+    );
   }
 
   /**
@@ -306,7 +305,7 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
    * ЧТО ВОЗВРАЩАЕТ:
    * @returns Observable<FeedItem[]> - массив элементов ленты
    */
-  onFetch(
+  private onFetch(
     offset: number,
     limit: number,
     includes: FeedItemType[] = ["project", "vacancy", "news"]
@@ -318,4 +317,33 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
       map(res => res.results)
     );
   }
+
+  private initObserver() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+
+    this.observer = new IntersectionObserver(this.onFeedItemView.bind(this), {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0.1,
+    });
+
+    this.observeNewElements();
+  }
+
+  /**
+   * ДОБАВЛЕНИЕ НОВЫХ ЭЛЕМЕНТОВ
+   */
+  private observeNewElements() {
+    // Небольшая задержка для рендеринга DOM
+    setTimeout(() => {
+      document.querySelectorAll(".page__item").forEach(element => {
+        if (element && !element.hasAttribute("data-observed")) {
+          this.observer?.observe(element);
+          element.setAttribute("data-observed", "true");
+        }
+      });
+    }, 0);
+  }
 }

projects/social_platform/src/app/office/feed/shared/new-project/new-project.component.scss

@@ -11,6 +11,7 @@
     display: flex;
     align-items: center;
     text-align: center;
+    justify-content: center;
   }
 
   &__project {

projects/social_platform/src/app/office/profile/edit/edit.component.html

@@ -818,6 +818,17 @@ <h1 class="profile__title">редактирование профиля</h1>
                 <p class="text-body-10 education__text">
                   {{ achievementItem.status }}
                 </p>
+
+                @if (achievementItem.files?.length) { @for (file of achievementItem.files; track
+                $index) {
+                <app-file-item
+                  [type]="file.mimeType"
+                  [name]="file.name"
+                  [size]="file.size"
+                  [link]="file.link"
+                >
+                </app-file-item>
+                } }
               </div>
 
               <div class="profile__action--icons">

projects/social_platform/src/app/office/profile/edit/edit.component.scss

@@ -247,6 +247,10 @@
   :first-child {
     color: var(--black);
   }
+
+  :last-child & app-file-item {
+    margin-top: 3px;
+  }
 }
 
 .edit-icon,