add profile progress to profile & avatar

Author: Awakich

projects/core/src/consts/fieldsProfile.ts

@@ -0,0 +1,17 @@
+/** @format */
+
+export const fieldsProfile = [
+  { key: "education", type: "array" },
+  { key: "workExperience", type: "array" },
+  { key: "userLanguages", type: "array" },
+  { key: "achievements", type: "array" },
+  { key: "skills", type: "array" },
+  { key: "birthday", type: "string" },
+  { key: "phoneNumber", type: "string" },
+  { key: "speciality", type: "string" },
+  { key: "aboutMe", type: "string" },
+  { key: "avatar", type: "string" },
+  { key: "city", type: "string" },
+  { key: "firstName", type: "string" },
+  { key: "lastName", type: "string" },
+];

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

@@ -46,6 +46,7 @@ export class User {
   skillsIds!: number[];
   isOnline!: boolean;
   isActive!: boolean;
+  progress?: number;
   v2Speciality!: {
     id: number;
     name: string;

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

@@ -41,6 +41,7 @@
         <app-avatar
           class="info__avatar"
           [url]="user.avatar"
+          [progress]="user.progress"
           [size]="(desktopMode$ | async) ? 165 : 140"
           [hasBorder]="true"
           [onlineBadgeSize]="30"
@@ -90,8 +91,8 @@ <h2 class="info__name">{{ user.firstName }} {{ user.lastName }}</h2>
             </a>
             } @else {
             <div class="profile__btns">
-              <a class="profile__cv">
-                @if(isSubscriptionActive){
+              <!-- <a class="profile__cv">
+                @if(isSubscriptionActive()){
                 <app-button
                   (click)="sendCVEmail()"
                   customTypographyClass="text-body-12"
@@ -100,15 +101,25 @@ <h2 class="info__name">{{ user.firstName }} {{ user.lastName }}</h2>
                   Скачать CV
                 </app-button>
                 }
-              </a>
+              </a> -->
 
               <a
                 class="profile__edit"
                 routerLink="/office/profile/edit"
                 [queryParams]="{ editingStep: 'main' }"
               >
                 <app-button customTypographyClass="text-body-12" color="grey">
-                  Редактировать профиль
+                  {{
+                    user.progress! === 100 ? "Редактировать профиль" : "Закончить заполнение резюме"
+                  }}
+                  @if (user.progress !== 100) {
+                  <i
+                    appIcon
+                    icon="color-error"
+                    appSquare="16"
+                    style="color: var(--accent); margin-left: 5px"
+                  ></i>
+                  }
                 </app-button>
               </a>
             </div>
@@ -148,6 +159,28 @@ <h2 class="info__name">{{ user.firstName }} {{ user.lastName }}</h2>
       </div>
     </app-modal>
 
+    <app-modal [open]="isProfileFill" (openChange)="isProfileFill = !isProfileFill">
+      <div class="cancel">
+        <div class="cancel__top">
+          <i (click)="isProfileFill = false" appIcon icon="cross" class="cancel__cross"></i>
+          <img
+            alt="profile unfill image"
+            class="cancel__image"
+            src="/assets/images/profile/profile-unfill.png"
+          />
+          <p class="cancel__title text-heading-4">Профиль не завершён</p>
+        </div>
+        <p class="text-body-14 cancel__text">
+          Заполни все поля, чтобы использовать<br />
+          Procollab на максимум
+        </p>
+
+        <a routerLink="/office/profile/edit" [queryParams]="{ editingStep: 'main' }">
+          <app-button customTypographyClass="text-body-12">Продолжить заполнение</app-button>
+        </a>
+      </div>
+    </app-modal>
+
     <div class="outlet">
       <router-outlet></router-outlet>
     </div>

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

@@ -281,6 +281,7 @@ $detail-bar-mb: 12px;
 
   @include responsive.apply-desktop {
     width: 50%;
+    min-width: 700px;
   }
 
   &__cross {
@@ -297,11 +298,23 @@ $detail-bar-mb: 12px;
     }
   }
 
+  &__image {
+    margin-bottom: 20px;
+  }
+
   &__title {
+    margin-bottom: 10px;
     text-align: center;
   }
 
   &__text {
     text-align: center;
   }
+
+  ::ng-deep {
+    app-button {
+      display: block;
+      margin-top: 20px;
+    }
+  }
 }

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

@@ -14,6 +14,7 @@ import { AvatarComponent } from "@ui/components/avatar/avatar.component";
 import { BackComponent } from "@uilib";
 import { AsyncPipe, CommonModule } from "@angular/common";
 import { ModalComponent } from "@ui/components/modal/modal.component";
+import { calculateProfileProgress } from "@utils/calculateProgress";
 
 @Component({
   selector: "app-profile-detail",
@@ -45,14 +46,18 @@ export class ProfileDetailComponent implements OnInit {
     public readonly breakpointObserver: BreakpointObserver
   ) {}
 
-  user$: Observable<User> = this.route.data.pipe(map(r => r["data"][0]));
-  loggedUserId$: Observable<number> = this.authService.profile.pipe(map(user => user.id));
+  user$: Observable<User> = this.route.data.pipe(
+    map(r => r["data"][0]),
+    map(user => ({ ...user, progress: calculateProfileProgress(user) }))
+  );
 
-  linkData = "";
+  loggedUserId$: Observable<number> = this.authService.profile.pipe(map(user => user.id));
 
   isDelayModalOpen = false;
   isSended = false;
-  isSubscriptionActive = false;
+  isSubscriptionActive = signal(false);
+
+  isProfileFill = false;
 
   errorMessageModal = signal("");
   desktopMode$: Observable<boolean> = this.breakpointObserver
@@ -62,19 +67,10 @@ export class ProfileDetailComponent implements OnInit {
   ngOnInit(): void {
     this.navService.setNavTitle("Профиль");
 
-    this.subscriptionPlansService
-      .getSubscriptions()
-      .pipe(
-        map(r => {
-          if (typeof r === "string") {
-            return !!r;
-          }
-          return false;
-        })
-      )
-      .subscribe(r => {
-        this.isSubscriptionActive = r!;
-      });
+    this.user$.subscribe(r => {
+      this.isProfileFill =
+        r.progress! < 100 ? (this.isProfileFill = true) : (this.isProfileFill = false);
+    });
   }
 
   downloadCV() {

projects/social_platform/src/app/ui/components/avatar/avatar.component.html

@@ -6,6 +6,15 @@
   [style.width]="size + 'px'"
   [style.height]="size + 'px'"
 >
+  @if (progress) {
+  <div
+    class="avatar__progress"
+    [style.--progress]="progress + '%'"
+    [style.--progress-width]="'-18px'"
+    [style.--progress-color]="'var(--accent)'"
+  ></div>
+  }
+
   <img
     [src]="url || placeholderUrl"
     [style.width]="size + 'px'"

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

@@ -3,17 +3,40 @@
 .avatar {
   position: relative;
 
+  &__progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    background:
+      conic-gradient(
+        var(--progress-color) 0 var(--progress),
+        transparent var(--progress) 100%
+      );
+    border-radius: 50%;
+    mask:
+      radial-gradient(
+        circle,
+        transparent calc(50% - var(--progress-width)),
+        white calc(50% - var(--progress-width))
+      );
+  }
+
   img {
+    position: relative;
+    z-index: 1;
+    border-radius: 50%;
     object-fit: cover;
     object-position: center;
-    border-radius: 50%;
   }
 
   &__online {
     position: absolute;
     right: 0;
     bottom: -1.5px;
-    z-index: 1;
+    z-index: 3;
     width: 16px;
     height: 16px;
     background-color: var(--green);

projects/social_platform/src/app/ui/components/avatar/avatar.component.ts

@@ -14,6 +14,8 @@ export class AvatarComponent implements OnInit {
   @Input() hasBorder = false;
   @Input() isOnline = false;
 
+  @Input() progress?: number;
+
   @Input() onlineBadgeSize = 16;
   @Input() onlineBadgeBorder = 3;
   @Input() onlineBadgeOffset = 0;

projects/social_platform/src/app/utils/calculateProgress.ts

@@ -0,0 +1,20 @@
+/** @format */
+
+import { User } from "@auth/models/user.model";
+import { fieldsProfile } from "projects/core/src/consts/fieldsProfile";
+
+export const calculateProfileProgress = (user: User) => {
+  let filledCount = 0;
+
+  fieldsProfile.forEach(({ key, type }) => {
+    const value = user[key as keyof User];
+
+    if (type === "array") {
+      if (Array.isArray(value) && value.length > 0) filledCount++;
+    } else {
+      if (typeof value === "string" && value.trim() !== "") filledCount++;
+    }
+  });
+
+  return Math.round((filledCount / fieldsProfile.length) * 100);
+};