fix filters for vacancy & feed to dynamic

Author: Awakich

projects/social_platform/src/app/office/feed/filter/feed-filter.component.html

@@ -6,11 +6,6 @@ <h3>Фильтр</h3>
     <a class="text-body-12" (click)="resetFilter()">Сбросить фильтр</a>
   </div>
   <ng-container *ngTemplateOutlet="filter"></ng-container>
-  <div class="desktop__actions">
-    <app-button class="" customTypographyClass="text-body-12" (click)="applyFilter()"
-      >Применить</app-button
-    >
-  </div>
 </div>
 
 <div class="mobile">
@@ -36,9 +31,6 @@ <h3>Фильтр</h3>
     </div>
     }
   </div>
-  <app-button class="" customTypographyClass="text-body-14" (click)="applyFilter()"
-    >Применить</app-button
-  >
 </div>
 
 <app-button [routerLink]="'/office/profile/' + profile()?.id">Написать новость</app-button>

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

@@ -23,11 +23,12 @@ import { Subscription } from "rxjs";
  *
  * Предоставляет интерфейс для фильтрации элементов ленты по типам контента.
  * Позволяет пользователю выбирать, какие типы элементов отображать в ленте.
+ * Обновления URL происходят мгновенно при каждом изменении фильтра.
  *
  * ОСНОВНЫЕ ФУНКЦИИ:
  * - Отображение выпадающего меню с опциями фильтрации
  * - Управление состоянием активных фильтров
- * - Синхронизация фильтров с URL параметрами
+ * - Мгновенная синхронизация фильтров с URL параметрами
  * - Применение и сброс фильтров
  *
  * ДОСТУПНЫЕ ФИЛЬТРЫ:
@@ -82,12 +83,15 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
     });
 
     // Читаем активные фильтры из URL
-    this.route.queryParams.subscribe(params => {
-      params["includes"] &&
-        this.includedFilters.set(params["includes"].split(this.feedService.FILTER_SPLIT_SYMBOL));
+    const routeSubscription = this.route.queryParams.subscribe(queries => {
+      if (queries["includes"]) {
+        this.includedFilters.set(queries["includes"].split(this.feedService.FILTER_SPLIT_SYMBOL));
+      } else {
+        this.includedFilters.set([]);
+      }
     });
 
-    this.subscriptions.push(profileSubscription);
+    this.subscriptions.push(profileSubscription, routeSubscription);
   }
 
   ngOnDestroy(): void {
@@ -114,18 +118,21 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
   includedFilters = signal<string[]>([]);
 
   /**
-   * ПРИМЕНЕНИЕ ФИЛЬТРОВ
+   * ОБНОВЛЕНИЕ URL С ТЕКУЩИМИ ФИЛЬТРАМИ
    *
-   * ЧТО ДЕЛАЕТ:
-   * - Обновляет URL параметры с выбранными фильтрами
-   * - Инициирует перезагрузку ленты с новыми фильтрами
-   * - Сохраняет другие параметры запроса
+   * Приватный метод для обновления URL параметров.
+   * Вызывается автоматически при любом изменении фильтров.
    */
-  applyFilter(): void {
+  private updateUrl(): void {
+    const includesParam =
+      this.includedFilters().length > 0
+        ? this.includedFilters().join(this.feedService.FILTER_SPLIT_SYMBOL)
+        : null;
+
     this.router
       .navigate([], {
         queryParams: {
-          includes: this.includedFilters().join(this.feedService.FILTER_SPLIT_SYMBOL),
+          includes: includesParam,
         },
         relativeTo: this.route,
         queryParamsHandling: "merge",
@@ -134,42 +141,47 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * ПЕРЕКЛЮЧЕНИЕ ФИЛЬТРА
+   * ПЕРЕКЛЮЧЕНИЕ ФИЛЬТРА С МГНОВЕННЫМ ОБНОВЛЕНИЕМ URL
    *
    * ЧТО ПРИНИМАЕТ:
    * @param keyword - значение фильтра для переключения
    *
    * ЧТО ДЕЛАЕТ:
    * - Добавляет фильтр, если он не активен
    * - Удаляет фильтр, если он уже активен
-   * - Обновляет состояние активных фильтров
+   * - Мгновенно обновляет URL параметры
    */
   setFilter(keyword: string): void {
     this.includedFilters.update(included => {
-      if (included.indexOf(keyword) !== -1) {
+      const newIncluded = [...included];
+
+      if (newIncluded.indexOf(keyword) !== -1) {
         // Удаляем фильтр, если он уже активен
-        const idx = included.indexOf(keyword);
-        included.splice(idx, 1);
+        const idx = newIncluded.indexOf(keyword);
+        newIncluded.splice(idx, 1);
       } else {
         // Добавляем новый фильтр
-        included.push(keyword);
+        newIncluded.push(keyword);
       }
 
-      return included;
+      return newIncluded;
     });
+
+    // Мгновенно обновляем URL
+    this.updateUrl();
   }
 
   /**
    * СБРОС ВСЕХ ФИЛЬТРОВ
    *
    * ЧТО ДЕЛАЕТ:
    * - Очищает все активные фильтры
-   * - Применяет пустой набор фильтров
+   * - Мгновенно обновляет URL
    * - Возвращает ленту к состоянию по умолчанию
    */
   resetFilter(): void {
     this.includedFilters.set([]);
-    this.applyFilter();
+    this.updateUrl();
   }
 
   /**

projects/social_platform/src/app/office/feed/shared/open-vacancy/open-vacancy.component.html

@@ -43,8 +43,8 @@ <h3 class="card__title">
     } }
   </div>
 
+  @if (feedItem.description) {
   <div class="action card__action">
-    @if (feedItem.description) {
     <div class="text-body-14 about__text">
       <p
         class="about__text text-body-14"
@@ -57,8 +57,8 @@ <h3 class="card__title">
       </div>
       }
     </div>
-    }
   </div>
+  }
   <div class="action card__action">
     <span class="action__job"> {{ feedItem.role }} </span>
     <app-button

projects/social_platform/src/app/office/vacancies/shared/filter/vacancy-filter.component.html

@@ -6,11 +6,6 @@ <h3>Фильтр</h3>
     <a class="text-body-12" (click)="resetFilter()">Сбросить фильтр</a>
   </div>
   <ng-container *ngTemplateOutlet="filter"></ng-container>
-  <div class="desktop__actions">
-    <app-button class="" customTypographyClass="text-body-12" (click)="applyFilter()"
-      >Применить</app-button
-    >
-  </div>
 </div>
 
 <div class="mobile">
@@ -36,9 +31,6 @@ <h3>Фильтр</h3>
     </div>
     }
   </div>
-  <app-button class="" customTypographyClass="text-body-14" (click)="applyFilter()"
-    >Применить</app-button
-  >
 </div>
 
 <ng-template #filter>
@@ -88,15 +80,27 @@ <h3>Фильтр</h3>
       </ul>
     </div>
 
-    <form [formGroup]="salaryForm">
-      <div class="filter__salary">
-        <span class="text-body-12">Заработная плата</span>
-        <div class="filter__amounts">
-          <app-input type="text" placeholder="от 50000" formControlName="salaryMin"></app-input>
-          <hr style="transform: rotate(90deg)" class="filter__salary-line" />
-          <app-input type="text" placeholder="до 150000" formControlName="salaryMax"></app-input>
-        </div>
+    <div class="filter__salary">
+      <span class="text-body-12">Заработная плата</span>
+      <div class="filter__amounts">
+        <app-input
+          type="text"
+          placeholder="от 50000"
+          [appValue]="salaryMinValue()"
+          (appValueChange)="onSalaryMinChange($event)"
+        >
+        </app-input>
+
+        <hr style="transform: rotate(90deg)" class="filter__salary-line" />
+
+        <app-input
+          type="text"
+          placeholder="до 150000"
+          [appValue]="salaryMaxValue()"
+          (appValueChange)="onSalaryMaxChange($event)"
+        >
+        </app-input>
       </div>
-    </form>
+    </div>
   </div>
 </ng-template>