fix invites service, add filter in programs all page & fix programs service, & add phone_number mask in profile edit

Author: Awakich

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

@@ -323,6 +323,7 @@ <h1 class="profile__title">редактирование профиля</h1>
               <app-input
                 size="big"
                 id="phoneNumber"
+                mask="0-000-000-00-00"
                 [error]="phoneNumber | controlError"
                 type="text"
                 placeholder="+79030195823"

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

@@ -120,11 +120,11 @@ export class ProfileEditComponent implements OnInit, OnDestroy, AfterViewInit {
     this.profileForm = this.fb.group({
       firstName: ["", [Validators.required]],
       lastName: ["", [Validators.required]],
-      email: ["", [Validators.email, Validators.max(50)]],
+      email: ["", [Validators.email, Validators.maxLength(50)]],
       userType: [0],
       birthday: ["", [Validators.required]],
-      city: ["", Validators.max(100)],
-      phoneNumber: [""],
+      city: ["", [Validators.required, Validators.maxLength(100)]],
+      phoneNumber: ["", Validators.maxLength(12)],
       additionalRole: [null],
       coverImageAddress: [null],
 
@@ -1037,6 +1037,9 @@ export class ProfileEditComponent implements OnInit, OnDestroy, AfterViewInit {
    * Валидирует всю форму и отправляет данные на сервер
    */
   saveProfile(): void {
+    this.profileForm.markAllAsTouched();
+    this.profileForm.updateValueAndValidity();
+
     const tempFields = [
       "organizationName",
       "entryYear",
@@ -1055,6 +1058,7 @@ export class ProfileEditComponent implements OnInit, OnDestroy, AfterViewInit {
       "status",
       "year",
       "files",
+      "phoneNumber",
     ];
 
     tempFields.forEach(name => {
@@ -1065,7 +1069,7 @@ export class ProfileEditComponent implements OnInit, OnDestroy, AfterViewInit {
       }
     });
 
-    const mainFieldsValid = ["firstName", "lastName", "birthday", "speciality"].every(
+    const mainFieldsValid = ["firstName", "lastName", "birthday", "speciality", "city"].every(
       name => this.profileForm.get(name)?.valid
     );
 

projects/social_platform/src/app/office/program/main/main.component.ts

@@ -1,15 +1,25 @@
 /** @format */
 
-import { Component, OnDestroy, OnInit, signal } from "@angular/core";
-import { ActivatedRoute, RouterLink } from "@angular/router";
-import { map, Subscription } from "rxjs";
+import { ChangeDetectorRef, Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
+import { ActivatedRoute, Params, Router, RouterLink } from "@angular/router";
+import {
+  combineLatest,
+  concatMap,
+  distinctUntilChanged,
+  map,
+  of,
+  Subscription,
+  switchMap,
+} from "rxjs";
 import { Program } from "@office/program/models/program.model";
 import { NavService } from "@office/services/nav.service";
 import Fuse from "fuse.js";
 import { CheckboxComponent, SelectComponent } from "@ui/components";
 import { generateOptionsList } from "@utils/generate-options-list";
 import { ClickOutsideModule } from "ng-click-outside";
 import { ProgramCardComponent } from "../shared/program-card/program-card.component";
+import { HttpParams } from "@angular/common/http";
+import { ProgramService } from "../services/program.service";
 
 /**
  * Главный компонент списка программ
@@ -59,13 +69,18 @@ import { ProgramCardComponent } from "../shared/program-card/program-card.compon
   ],
 })
 export class ProgramMainComponent implements OnInit, OnDestroy {
-  constructor(private readonly route: ActivatedRoute, private readonly navService: NavService) {}
+  private readonly navService = inject(NavService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly programService = inject(ProgramService);
+  private readonly cdref = inject(ChangeDetectorRef);
 
   programCount = 0;
 
   programs: Program[] = [];
   searchedPrograms: Program[] = [];
   subscriptions$: Subscription[] = [];
+  isPparticipating = signal<boolean>(false);
 
   readonly programOptionsFilter = generateOptionsList(4, "strings", [
     "все",
@@ -77,32 +92,65 @@ export class ProgramMainComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.navService.setNavTitle("Программы");
 
-    const querySearch$ = this.route.queryParams.pipe(map(q => q["search"])).subscribe(search => {
-      const fuse = new Fuse(this.programs, {
-        keys: ["name"],
-      });
+    const combined$ = combineLatest([
+      this.route.queryParams.pipe(
+        map(q => ({ filter: this.buildFilterQuery(q), search: q["search"] || "" })),
+        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
+      ),
+    ])
+      .pipe(
+        switchMap(([{ filter, search }]) => {
+          this.isPparticipating.set(filter["participating"] === "true");
 
-      this.searchedPrograms = search ? fuse.search(search).map(el => el.item) : this.programs;
-    });
+          return this.programService
+            .getAll(0, 20, new HttpParams({ fromObject: filter }))
+            .pipe(map(response => ({ response, search })));
+        })
+      )
+      .subscribe(({ response, search }) => {
+        this.programCount = response.count;
+        this.programs = response.results ?? [];
 
-    querySearch$ && this.subscriptions$.push(querySearch$);
+        if (search) {
+          const fuse = new Fuse(this.programs, {
+            keys: ["name"],
+            threshold: 0.3,
+          });
+          this.searchedPrograms = fuse.search(search).map(el => el.item);
+        } else {
+          this.searchedPrograms = this.programs;
+        }
 
-    const programs$ = this.route.data.pipe(map(r => r["data"])).subscribe(programs => {
-      this.programCount = programs.count;
-      this.programs = programs.results ?? [];
-      this.searchedPrograms = programs.results ?? [];
-    });
+        this.cdref.detectChanges();
+      });
 
-    programs$ && this.subscriptions$.push(programs$);
+    this.subscriptions$.push(combined$);
   }
 
-  isPparticipating = signal<boolean>(false);
+  private buildFilterQuery(q: Params): Record<string, any> {
+    const reqQuery: Record<string, any> = {};
+
+    if (q["participating"]) {
+      reqQuery["participating"] = q["participating"];
+    }
+
+    return reqQuery;
+  }
 
   /**
-   * Переключает состояние чекбокса
+   * Переключает состояние чекбокса "участвую"
    */
   onTogglePparticipating(): void {
-    this.isPparticipating.set(!this.isPparticipating());
+    const newValue = !this.isPparticipating();
+    this.isPparticipating.set(newValue);
+
+    this.router.navigate([], {
+      queryParams: {
+        participating: newValue ? "true" : null,
+      },
+      relativeTo: this.route,
+      queryParamsHandling: "merge",
+    });
   }
 
   ngOnDestroy(): void {

projects/social_platform/src/app/office/program/services/program.service.ts

@@ -2,10 +2,10 @@
 
 import { Injectable } from "@angular/core";
 import { ApiService } from "projects/core";
-import { BehaviorSubject, map, Observable, tap } from "rxjs";
+import { map, Observable } from "rxjs";
 import { HttpParams } from "@angular/common/http";
 import { ProgramCreate } from "@office/program/models/program-create.model";
-import { Program, ProgramDataSchema, ProgramTag } from "@office/program/models/program.model";
+import { Program, ProgramDataSchema } from "@office/program/models/program.model";
 import { Project } from "@models/project.model";
 import { ApiPagination } from "@models/api-pagination.model";
 import { User } from "@auth/models/user.model";
@@ -49,11 +49,22 @@ export class ProgramService {
 
   constructor(private readonly apiService: ApiService) {}
 
-  getAll(skip: number, take: number): Observable<ApiPagination<Program>> {
-    return this.apiService.get(
-      `${this.PROGRAMS_URL}/`,
-      new HttpParams({ fromObject: { limit: take, offset: skip } })
-    );
+  getAll(skip: number, take: number, params?: HttpParams): Observable<ApiPagination<Program>> {
+    let httpParams = new HttpParams();
+
+    httpParams.set("limit", take);
+    httpParams.set("offset", skip);
+
+    if (params) {
+      params.keys().forEach(key => {
+        const value = params.get(key);
+        if (value !== null) {
+          httpParams = httpParams.set(key, value);
+        }
+      });
+    }
+
+    return this.apiService.get(`${this.PROGRAMS_URL}/`, httpParams);
   }
 
   getOne(programId: number): Observable<Program> {

projects/social_platform/src/app/office/services/invite.service.ts

@@ -99,16 +99,9 @@ export class InviteService {
    * @returns Observable<Invite[]> - массив приглашений, адресованных текущему пользователю
    */
   getMy(): Observable<Invite[]> {
-    return this.authService.profile.pipe(
-      take(1),
-      concatMap(profile =>
-        this.apiService.get<Invite[]>(
-          `${this.INVITES_URL}/`,
-          new HttpParams({ fromObject: { user_id: profile.id } })
-        )
-      ),
-      map(invites => plainToInstance(Invite, invites))
-    );
+    return this.apiService
+      .get<Invite[]>(`${this.INVITES_URL}/`)
+      .pipe(map(invites => plainToInstance(Invite, invites)));
   }
 
   /**

projects/social_platform/src/app/ui/components/input/input.component.scss

@@ -47,7 +47,7 @@
     }
 
     &--error {
-      border-color: var(--red);
+      border: 0.5px solid var(--red);
     }
 
     @include typography.body-10;