fix approves in profile & button in projetcs

Author: Awakich

projects/social_platform/src/app/office/profile/detail/main/main.component.html

@@ -98,7 +98,7 @@ <h3 class="text-heading-3 about__title">Обо мне</h3>
         }
       </ul>
 
-      <p class="approves__text">
+      <p class="approves__text text-body-14">
         Нажимая на <strong>плюс</strong>, вы подтверждаете, что {{ user.firstName }} владеет этим
         навыком
       </p>

projects/social_platform/src/app/office/profile/detail/main/main.component.scss

@@ -500,6 +500,15 @@ $section-padding: 24px;
     margin-top: 24px;
     margin-bottom: 24px;
 
+    // &__text {
+    //   color: var(--black);
+    //   @include typography.body-12;
+
+    //   @include responsive.apply-desktop {
+    //     @include typography.body-14;
+    //   }
+    // }
+
     &__info {
       display: flex;
       gap: 80px;
@@ -516,14 +525,6 @@ $section-padding: 24px;
     &__speciality {
       color: var(--dark-grey);
     }
-
-    &__text {
-      @include typography.body-12;
-
-      @include responsive.apply-desktop {
-        @include typography.body-14;
-      }
-    }
   }
 
   &__more {

projects/social_platform/src/app/office/profile/detail/main/main.component.ts

@@ -16,7 +16,17 @@ import { ActivatedRoute, RouterLink } from "@angular/router";
 import { User } from "@auth/models/user.model";
 import { AuthService } from "@auth/services";
 import { expandElement } from "@utils/expand-element";
-import { BehaviorSubject, concatMap, map, noop, Observable, Subscription, tap } from "rxjs";
+import {
+  BehaviorSubject,
+  concatMap,
+  map,
+  noop,
+  Observable,
+  of,
+  Subscription,
+  switchMap,
+  tap,
+} from "rxjs";
 import { ProfileNewsService } from "../services/profile-news.service";
 import { NewsFormComponent } from "@office/shared/news-form/news-form.component";
 import { ProfileNews } from "../models/profile-news.model";
@@ -175,14 +185,28 @@ export class ProfileMainComponent implements OnInit, AfterViewInit, OnDestroy {
 
     if (skill.approves.length > 0) {
       this.profileApproveSkillService.unApproveSkill(userId, skillId).subscribe(() => {
-        skill.approves.pop();
+        skill.approves = skill.approves.slice(0, -1);
+        this.cdRef.markForCheck();
       });
     } else {
-      this.profileApproveSkillService.approveSkill(userId, skillId).subscribe(() => {
-        this.authService.profile.subscribe(response => {
-          skill.approves.push({ confirmedBy: response });
+      this.profileApproveSkillService
+        .approveSkill(userId, skillId)
+        .pipe(
+          switchMap(newApprove =>
+            newApprove.confirmedBy
+              ? of(newApprove)
+              : this.authService.profile.pipe(
+                  map(profile => ({
+                    ...newApprove,
+                    confirmedBy: profile,
+                  }))
+                )
+          )
+        )
+        .subscribe(updatedApprove => {
+          skill.approves = [...skill.approves, updatedApprove];
+          this.cdRef.markForCheck();
         });
-      });
     }
   }
 

projects/social_platform/src/app/office/projects/list/list.component.scss

@@ -115,6 +115,8 @@
   justify-content: space-between;
   padding: 15px 10px;
   cursor: pointer;
+ border:  1px solid var(--medium-medium-grey-for-outline);
+  border-radius: 15px;
   background-color: var(--white);
 
   @include responsive.apply-desktop {

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

@@ -32,12 +32,10 @@
     </app-bar>
     <div class="bar__right">
       @if (isMy) {
-      <div>
-        <button (click)="addProject()" class="text-body-14 bar__add-project">
-          <span class="bar__add-project-text">Добавить проект</span>
-          <i appIcon icon="plus" appSquare="18"></i>
-        </button>
-      </div>
+      <app-button (click)="addProject()" customTypographyClass="ext-body-14 bar__add-project">
+        <span class="bar__add-project-text">Добавить проект</span>
+        <i appIcon icon="plus" appSquare="18"></i>
+      </app-button>
       } @else if (isAll) {
       <div class="bar__bottom">
         <form [formGroup]="searchForm">

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

@@ -16,6 +16,7 @@
   }
 
   .bar__bottom {
+    width: 100%;
     padding: 20px 0;
     background-color: var(--white);
     border: 1px solid var(--medium-grey-for-outline);

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

@@ -2,20 +2,13 @@
 
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { NavService } from "@services/nav.service";
-import {
-  ActivatedRoute,
-  NavigationEnd,
-  Router,
-  RouterLink,
-  RouterLinkActive,
-  RouterOutlet,
-} from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import { map, Subscription } from "rxjs";
 import { ProjectCount } from "@models/project.model";
 import { ProjectService } from "@services/project.service";
 import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { SearchComponent } from "@ui/components/search/search.component";
-import { BarComponent, IconComponent } from "@ui/components";
+import { BarComponent, ButtonComponent, IconComponent } from "@ui/components";
 import { AsyncPipe } from "@angular/common";
 
 @Component({
@@ -24,11 +17,10 @@ import { AsyncPipe } from "@angular/common";
   styleUrl: "./projects.component.scss",
   standalone: true,
   imports: [
-    RouterLink,
-    RouterLinkActive,
     IconComponent,
     ReactiveFormsModule,
     SearchComponent,
+    ButtonComponent,
     RouterOutlet,
     AsyncPipe,
     BarComponent,