add invites to project page & soon-card component, change design of project-card, project-filter, change logic of subscribing to project

Author: Awakich

projects/social_platform/src/app/office/models/project.model.ts

@@ -55,6 +55,7 @@ export class Project {
   partnerProgram!: PartnerProgramInfo | null;
   vacancies!: Vacancy[];
   isCompany!: boolean;
+  inviteId!: number;
 
   static default(): Project {
     return {
@@ -84,6 +85,7 @@ export class Project {
       leader: 0,
       vacancies: [],
       isCompany: true,
+      inviteId: 0,
     };
   }
 }

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

@@ -55,28 +55,6 @@
   }
 }
 
-.message-modal {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 402px;
-
-  &__title {
-    margin: 18px 0;
-    color: var(--black);
-    text-align: center;
-  }
-
-  &__text {
-    color: var(--dark-grey);
-    text-align: center;
-  }
-
-  &__button {
-    margin-top: 18px;
-  }
-}
-
 .pro-item {
   display: flex;
   align-items: center;

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

@@ -121,26 +121,10 @@
       <div class="program__left">
         <aside class="program__aside">
           @if (program.isUserMember) {
-          <div class="program__analytics">
-            <div class="analytics">
-              <div class="analytics__soon">
-                <div class="analytics__closed">
-                  <i appIcon icon="lock" appSquare="10"></i>
-                  <span class="text-body-6 analytics__closed--text">пока закрыто</span>
-                </div>
-                <app-button customTypographyClass="text-body-6" color="green" size="extra-small"
-                  >скоро</app-button
-                >
-              </div>
-
-              <div class="analytics__info">
-                <p class="text-body-12">аналитика</p>
-                <p class="text-body-6">
-                  уровень включённости студентов, статистика достижения целей в проектах
-                </p>
-              </div>
-            </div>
-          </div>
+          <app-soon-card
+            title="аналитика"
+            description="уровень включённости студентов, статистика достижения целей в проектах"
+          ></app-soon-card>
           }
         </aside>
       </div>

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

@@ -61,13 +61,6 @@
     grid-template-columns: 2fr 5fr 3fr;
     grid-gap: 20px;
   }
-
-  &__analytics {
-    padding: 12px;
-    background-color: var(--light-white);
-    border: 0.5px solid var(--medium-grey-for-outline);
-    border-radius: var(--rounded-lg);
-  }
 }
 
 .bar__add-project {
@@ -116,55 +109,6 @@
   }
 }
 
-.analytics {
-  text-align: center;
-
-  &__soon {
-    position: relative;
-    margin-bottom: 4px;
-    border: 0.5px solid var(--medium-grey-for-outline);
-    border-radius: var(--rounded-lg);
-  }
-
-  &__closed {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    align-items: center;
-    justify-content: center;
-    padding: 24px 37px;
-
-    &--text {
-      color: var(--dark-grey);
-    }
-
-    i {
-      color: var(--dark-grey);
-    }
-  }
-
-  app-button {
-    position: absolute;
-    top: 82%;
-    left: 41%;
-  }
-
-  &__info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 8px;
-
-    p {
-      width: 60%;
-      color: var(--accent);
-      text-align: center;
-    }
-  }
-}
-
 .about {
   padding: 24px;
   background-color: var(--light-white);

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

@@ -42,6 +42,7 @@ import { Project } from "@office/models/project.model";
 import { HttpErrorResponse } from "@angular/common/http";
 import { ProjectAssign } from "@office/projects/models/project-assign.model";
 import { ProjectAdditionalService } from "@office/projects/edit/services/project-additional.service";
+import { SoonCardComponent } from "@office/shared/soon-card/soon-card.component";
 
 @Component({
   selector: "app-main",
@@ -63,6 +64,7 @@ import { ProjectAdditionalService } from "@office/projects/edit/services/project
     ModalComponent,
     MatProgressBarModule,
     InputComponent,
+    SoonCardComponent,
   ],
 })
 export class ProgramDetailMainComponent implements OnInit, OnDestroy {

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

@@ -20,46 +20,6 @@
           [hasBorder]="true"
           [size]="140"
         ></app-avatar>
-        <div class="info__subscribe">
-          <app-button
-            (click)="onSubscribe(project.id)"
-            customTypographyClass="text-body-12"
-            color="white"
-          >
-            <p [style]="{ color: isUserSubscribed ? 'var(--green)' : 'var(--accent)' }">
-              {{ isUserSubscribed ? "Вы подписаны" : "Подписаться" }}
-            </p>
-            @if (isUserSubscribed) {
-            <i
-              appIcon
-              appSquare="18"
-              [style]="{ color: isUserSubscribed ? 'var(--green)' : '' }"
-              [icon]="isUserSubscribed ? 'check' : ''"
-            ></i>
-            }
-          </app-button>
-        </div>
-        <app-modal [(open)]="isUnsubscribeModalOpen">
-          <div class="unsubscribe-modal">
-            <h3>Вы действительно хотите отписаться от проекта?</h3>
-            <app-avatar [url]="project.imageAddress" [size]="130"></app-avatar>
-            <div class="unsubscribe-modal__buttons">
-              <app-button
-                color="red"
-                customTypographyClass="unsubscribe-modal-btn__typography"
-                (click)="onUnsubscribe(project.id)"
-              >
-                Отписаться
-              </app-button>
-              <app-button
-                customTypographyClass="unsubscribe-modal-btn__typography"
-                (click)="onCloseUnsubscribeModal()"
-              >
-                Отменить
-              </app-button>
-            </div>
-          </div>
-        </app-modal>
       </div>
       @if (authService.profile | async; as profile) {
       <div class="info__body">
@@ -421,28 +381,6 @@ <h4 class="support__title">Редактирование недоступно</h4
       >
     </div>
   </app-modal>
-
-  <app-modal [(open)]="isUnsubscribeModalOpen">
-    <div class="unsubscribe-modal">
-      <h3>Вы действительно хотите отписаться от проекта?</h3>
-      <app-avatar [url]="project.imageAddress" [size]="130"></app-avatar>
-      <div class="unsubscribe-modal__buttons">
-        <app-button
-          color="red"
-          customTypographyClass="unsubscribe-modal-btn__typography"
-          (click)="onUnsubscribe(project.id)"
-        >
-          Отписаться
-        </app-button>
-        <app-button
-          customTypographyClass="unsubscribe-modal-btn__typography"
-          (click)="onCloseUnsubscribeModal()"
-        >
-          Отменить
-        </app-button>
-      </div>
-    </div>
-  </app-modal>
   <router-outlet></router-outlet>
 </main>
 }

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

@@ -20,7 +20,6 @@ import { Collaborator } from "@office/models/collaborator.model";
 import { ProjectNewsService } from "@office/projects/detail/services/project-news.service";
 import { FeedNews } from "@office/projects/models/project-news.model";
 import { ProjectService } from "@office/services/project.service";
-import { SubscriptionService } from "@office/services/subscription.service";
 import { NewsCardComponent } from "@office/shared/news-card/news-card.component";
 import { NewsFormComponent } from "@office/shared/news-form/news-form.component";
 import { IndustryService } from "@services/industry.service";
@@ -101,7 +100,6 @@ export class ProjectInfoComponent implements OnInit, AfterViewInit, OnDestroy {
     public readonly authService: AuthService, // Сервис аутентификации
     private readonly navService: NavService, // Сервис навигации
     private readonly projectNewsService: ProjectNewsService, // Сервис новостей проекта
-    private readonly subscriptionService: SubscriptionService, // Сервис подписок
     private readonly projectService: ProjectService, // Сервис проектов
     private readonly cdRef: ChangeDetectorRef // Сервис для ручного запуска обнаружения изменений
   ) {}
@@ -148,15 +146,6 @@ export class ProjectInfoComponent implements OnInit, AfterViewInit, OnDestroy {
       this.profileId = profile.id;
     });
 
-    // Проверка статуса подписки пользователя на проект
-    this.projSubscribers$
-      ?.pipe(take(1), withLatestFrom(this.authService.profile))
-      .subscribe(([projSubs, profile]) => {
-        projSubs.some(sub => sub.id === profile.id)
-          ? (this.isUserSubscribed = true)
-          : (this.isUserSubscribed = false);
-      });
-
     const projectEditSub$ =
       this.project$?.subscribe(project => {
         if (project.partnerProgram) {
@@ -325,44 +314,10 @@ export class ProjectInfoComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   // Состояние подписки и модальных окон
-  isUserSubscribed!: boolean; // Флаг подписки пользователя
-  isUnsubscribeModalOpen = false; // Флаг модального окна отписки
   isLeaveProjectModalOpen = false; // Флаг модального окна выхода
   isEditDisable = false; // Флаг недоступности редактирования
   isEditDisableModal = false; // Флаг недоступности редактирования для модалки
 
-  /**
-   * Подписка на проект или открытие модального окна отписки
-   * @param projectId - ID проекта
-   */
-  onSubscribe(projectId: number): void {
-    if (this.isUserSubscribed) {
-      this.isUnsubscribeModalOpen = true;
-      return;
-    }
-    this.subscriptionService.addSubscription(projectId).subscribe(() => {
-      this.isUserSubscribed = true;
-    });
-  }
-
-  /**
-   * Отписка от проекта
-   * @param projectId - ID проекта
-   */
-  onUnsubscribe(projectId: number): void {
-    this.subscriptionService.deleteSubscription(projectId).subscribe(() => {
-      this.isUserSubscribed = false;
-      this.isUnsubscribeModalOpen = false;
-    });
-  }
-
-  /**
-   * Закрытие модального окна отписки
-   */
-  onCloseUnsubscribeModal(): void {
-    this.isUnsubscribeModalOpen = false;
-  }
-
   /**
    * Закрытие модального окна предупреждения лидера
    */

projects/social_platform/src/app/office/projects/list/invites.resolver.ts

@@ -0,0 +1,22 @@
+/** @format */
+
+import { inject } from "@angular/core";
+import { ResolveFn } from "@angular/router";
+import { Invite } from "@office/models/invite.model";
+import { InviteService } from "@office/services/invite.service";
+
+/**
+ * Резолвер для предзагрузки приглашений пользователя
+ * Загружает данные о приглашениях перед инициализацией компонента офиса
+ *
+ * Принимает:
+ * - Контекст маршрута (неявно через Angular DI)
+ *
+ * Возвращает:
+ * - Observable<Invite[]> - массив приглашений пользователя
+ */
+export const ProjectsInvitesResolver: ResolveFn<Invite[]> = () => {
+  const inviteService = inject(InviteService);
+
+  return inviteService.getMy();
+};

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

@@ -13,38 +13,14 @@
       <li>
         <app-project-card
           [project]="project"
-          [canDelete]="project.leader === profile?.id"
+          [type]="isInvites ? 'invite' : 'project'"
           [isSubscribed]="profileProjSubsIds?.includes(project.id)"
-          (remove)="deleteProject($event)"
+          [profileId]="project.id"
+          (onAcceptingInvite)="onAcceptInvite($event)"
+          (onRejectingInvite)="onRejectInvite($event)"
         ></app-project-card>
       </li>
     </a>
     }
   </ul>
-  @if (isAll) {
-  <div class="filter page__filter" [class.page__filter--open]="isFilterOpen">
-    <div class="filter__overlay" (click)="isFilterOpen = false"></div>
-    <div class="filter__body" #filterBody>
-      <div
-        class="filter__bar"
-        (touchstart)="onSwipeStart($event)"
-        (touchmove)="onSwipeMove($event)"
-        (touchend)="onSwipeEnd($event)"
-      ></div>
-      <app-projects-filter (closeFilter)="closeFilter()"></app-projects-filter>
-    </div>
-  </div>
-  } @else if (!projects.length && isMy) {
-  <div class="page__empty empty text-body-12">
-    <button class="empty__action text-body-12" (click)="addProject()">
-      <i appIcon icon="plus" appSquare="12"></i>
-      Добавьте свой первый проект
-    </button>
-    <span class="empty__or">или</span>
-    <a class="empty__action" routerLink="/office/projects/all">
-      <i appIcon icon="search" appSquare="32"></i>
-      Найдите интересующий проект в списке
-    </a>
-  </div>
-  }
 </section>

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

@@ -30,8 +30,8 @@
     display: grid;
     flex-grow: 1;
     grid-template-columns: 1fr;
-    row-gap: 20px;
-    column-gap: 40px;
+    row-gap: 40px;
+    column-gap: 20px;
     align-items: flex-start;
 
     @include responsive.apply-desktop {