change design of modal for submit project & add logic for submit project to program

Author: Awakich

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

@@ -237,35 +237,28 @@ <h3 class="links__title text-body-12">материалы</h3>
   <div class="cancel" style="width: 500px; padding: 40px 0px 40px">
     <div class="cancel__top">
       <i appIcon icon="cross" class="cancel__cross" (click)="closeModal()"></i>
-      <p class="cancel__title text-bold-body-16">
-        Вы не являетесь экспертом или организатором программы!
+      <p class="cancel__title text-body-14">
+        вы не являетесь экспертом или организатором программы!
       </p>
     </div>
 
     @if (showProgramModalErrorMessage()) {
-    <p class="text-body-12 cancel__text">
+    <p class="text-body-10 cancel__text">
       {{ showProgramModalErrorMessage() }}
     </p>
     }
 
     <app-button class="cancel__button" (click)="closeModal()" customTypographyClass="text-body-12"
-      >Хорошо</app-button
+      >хорошо</app-button
     >
   </div>
 </app-modal>
 
 <app-modal [open]="showSubmitProjectModal()" (openChange)="toggleSubmitProjectModal()">
   <div class="cancel">
     <div class="cancel__top">
-      <i
-        (click)="toggleSubmitProjectModal()"
-        appIcon
-        appSquare="24"
-        icon="cross"
-        class="cancel__cross"
-      ></i>
       <p class="cancel__title text-body-14">выберите проект для подачи</p>
-      <p class="cancel__text text-body-10" style="width: 41%">
+      <p class="cancel__text text-body-10">
         после выбора проекта будет создан дубликат данного проекта для заполнения под конкретный
         конкурс
       </p>
@@ -282,7 +275,6 @@ <h3 class="links__title text-body-12">материалы</h3>
             </div>
             <app-input
               type="radio"
-              name="goalLeaderSelection"
               [appValue]="project.id.toLocaleString()"
               [checked]="selectedProjectId === project.id"
               (change)="onProjectRadioChange($event)"
@@ -304,4 +296,53 @@ <h3 class="links__title text-body-12">материалы</h3>
     </app-button>
   </div>
 </app-modal>
+
+<app-modal
+  [open]="isAssignProjectToProgramError"
+  (openChange)="isAssignProjectToProgramError ? clearAssignProjectToProgramError() : null"
+>
+  <div class="cancel" style="padding: 24px">
+    <div class="cancel__top">
+      <p class="cancel__title text-body-14">ошибка привязки проекта к программе!</p>
+    </div>
+
+    <p class="text-body-10 cancel__text">
+      {{ (errorAssignProjectToProgramModalMessage()?.non_field_errors)![0] }}
+    </p>
+
+    <app-button
+      size="medium"
+      class="cancel__button"
+      customTypographyClass="text-body-12"
+      (click)="clearAssignProjectToProgramError()"
+      >понятно</app-button
+    >
+  </div>
+</app-modal>
+
+<app-modal
+  [open]="isAssignProjectToProgramModalOpen()"
+  (openChange)="isAssignProjectToProgramModalOpen.set(!isAssignProjectToProgramModalOpen)"
+>
+  <div class="cancel" style="padding: 24px">
+    <div class="cancel__top">
+      <p class="cancel__title text-body-14">поздравляем!</p>
+    </div>
+
+    <p class="text-body-10 cancel__text">
+      мы создали дубликат проекта, который вы привязали к выбранной программе
+      <span
+        ><strong>{{ assignProjectToProgramModalMessage()?.partnerProgram }}</strong></span
+      >, теперь его можно отредактировать!
+    </p>
+
+    <app-button
+      size="medium"
+      class="cancel__button"
+      customTypographyClass="text-body-12"
+      (click)="closeAssignProjectToProgramModal()"
+      >вперед</app-button
+    >
+  </div>
+</app-modal>
 }

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

@@ -86,7 +86,6 @@
 }
 
 .project {
-  margin-top: 40px;
 
   &__list {
     display: flex;
@@ -107,6 +106,7 @@
     align-items: center;
     justify-content: space-between;
     width: 300px;
+    margin-left: 40px;
     margin-bottom: 12px;
 
     &--info {
@@ -375,18 +375,6 @@
   max-height: calc(100vh - 40px);
   padding: 24px 54px;
 
-  &__cross {
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-
-    @include responsive.apply-desktop {
-      top: 8px;
-      right: 8px;
-    }
-  }
-
   &__top {
     display: flex;
     flex-direction: column;
@@ -401,6 +389,8 @@
 
   &__text {
     text-align: center;
+    color: var(--dark-grey);
+    width: 40%;
   }
 
   &__button {

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

@@ -39,6 +39,9 @@ import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { AsyncPipe } from "@angular/common";
 import { LoadingService } from "@office/services/loading.service";
 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";
 
 @Component({
   selector: "app-main",
@@ -67,23 +70,46 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
     private readonly programService: ProgramService,
     private readonly programNewsService: ProgramNewsService,
     private readonly projectService: ProjectService,
+    private readonly projectAdditionalService: ProjectAdditionalService,
     private readonly router: Router,
     private readonly route: ActivatedRoute,
     private readonly cdRef: ChangeDetectorRef,
     private readonly loadingService: LoadingService
   ) {}
 
+  get isAssignProjectToProgramError() {
+    return this.projectAdditionalService.getIsAssignProjectToProgramError()();
+  }
+
+  get errorAssignProjectToProgramModalMessage() {
+    return this.projectAdditionalService.getErrorAssignProjectToProgramModalMessage();
+  }
+
   news = signal<FeedNews[]>([]);
   totalNewsCount = signal(0);
   fetchLimit = signal(10);
   fetchPage = signal(0);
 
+  // Сигналы для работы с модальными окнами с текстом
   showProgramModal = signal(false);
   showProgramModalErrorMessage = signal<string | null>(null);
+  assignProjectToProgramModalMessage = signal<ProjectAssign | null>(null);
 
+  // Сигналы для управления состоянием
   showSubmitProjectModal = signal(false);
+  isAssignProjectToProgramModalOpen = signal(false);
+
+  // Методы для управления состоянием ошибок через сервис
+  setAssignProjectToProgramError(error: { non_field_errors: string[] }): void {
+    this.projectAdditionalService.setAssignProjectToProgramError(error);
+  }
+
+  clearAssignProjectToProgramError(): void {
+    this.projectAdditionalService.clearAssignProjectToProgramError();
+  }
 
   selectedProjectId = 0;
+  dubplicatedProjectId = 0;
 
   programId?: number;
 
@@ -150,7 +176,7 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
 
     const memeberProjects$ = this.projectService.getMy().subscribe({
       next: projects => {
-        this.memberProjects = projects.results;
+        this.memberProjects = projects.results.filter(project => !project.draft);
       },
     });
 
@@ -276,6 +302,18 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Обработчик изменения радио-кнопки для выбора проекта
+   */
+  onProjectRadioChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.selectedProjectId = +target.value;
+
+    if (this.selectedProjectId) {
+      this.memberProjects.find(project => project.id === this.selectedProjectId);
+    }
+  }
+
   /**
    * Добавление проекта на программу
    */
@@ -288,53 +326,41 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
       project => project.id === this.selectedProjectId
     );
 
-    console.log("Submitting project:", {
-      projectId: this.selectedProjectId,
-      projectName: selectedProject?.name,
-      programId: this.programId,
-    });
-
-    this.toggleSubmitProjectModal();
-    this.selectedProjectId = 0;
+    this.assignProjectToProgram(selectedProject!);
   }
 
+  /** Эмитим логику для привязки проекта к программе */
   /**
-   * Обработчик изменения радио-кнопки для выбора проекта
+   * Привязка проекта к программе выбранной
+   * Перенаправление её на редактирование "нового" проекта
    */
-  onProjectRadioChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.selectedProjectId = +target.value;
-
-    if (this.selectedProjectId) {
-      const selectedProject = this.memberProjects.find(
-        project => project.id === this.selectedProjectId
-      );
+  assignProjectToProgram(project: Project): void {
+    if (this.programId) {
+      this.projectService.assignProjectToProgram(project.id, this.programId).subscribe({
+        next: r => {
+          this.dubplicatedProjectId = r.newProjectId;
+          this.assignProjectToProgramModalMessage.set(r);
+          this.isAssignProjectToProgramModalOpen.set(true);
+          this.toggleSubmitProjectModal();
+          this.selectedProjectId = 0;
+        },
 
-      console.log("Selected Project ID:", this.selectedProjectId);
-      console.log("Selected Project Info:", selectedProject);
+        error: err => {
+          if (err instanceof HttpErrorResponse) {
+            if (err.status === 400) {
+              this.setAssignProjectToProgramError(err.error);
+            }
+          }
+        },
+      });
     }
   }
 
-  addProject(): void {
-    this.loadingService.show();
-
-    this.projectService.create().subscribe({
-      next: project => {
-        this.projectService.projectsCount.next({
-          ...this.projectService.projectsCount.getValue(),
-          my: this.projectService.projectsCount.getValue().my + 1,
-        });
-        this.router
-          .navigateByUrl(`/office/projects/${project.id}/edit?editingStep=main`)
-          .then(() => {
-            console.debug("Route change from ProjectsComponent");
-          });
-      },
-      error: error => {
-        this.loadingService.hide();
-        console.error("Project creation error:", error);
-      },
-    });
+  closeAssignProjectToProgramModal(): void {
+    this.isAssignProjectToProgramModalOpen.set(false);
+    this.router.navigateByUrl(
+      `/office/projects/${this.dubplicatedProjectId}/edit?editingStep=main`
+    );
   }
 
   onOpenDetailProgram(): void {

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

@@ -109,13 +109,4 @@ export class ProgramService {
       {}
     );
   }
-
-  programTags$ = new BehaviorSubject<ProgramTag[]>([]);
-  programTags(): Observable<ProgramTag[]> {
-    return this.apiService.get<ProgramTag[]>(`${this.AUTH_USERS_CURRENT_URL}/programs/tags/`).pipe(
-      tap(programs => {
-        this.programTags$.next(programs);
-      })
-    );
-  }
 }

projects/social_platform/src/app/office/program/shared/program-card/program-card.component.html

@@ -12,13 +12,18 @@
     <p
       class="text-body-10 card__description card__registration"
       [ngClass]="{
-        'card__registration--actual': type === 'actual',
-        'card__registration--participating': type === 'participating',
-        'card__registration--ended': type === 'ended',
+        'card__registration--actual': (!registerDateExpired && (!program.isUserMember || !program.isUserManager)),
+        'card__registration--participating': program.isUserMember,
+        'card__registration--ended': registerDateExpired,
       }"
     >
-      Регистрация до:
-      {{ program.datetimeRegistrationEnds | date: "dd MMMM" }}
+      {{
+        !registerDateExpired && (!program.isUserMember || !program.isUserManager)
+          ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM")
+          : registerDateExpired
+          ? "программа завершена"
+          : "ты уже участвуешь!"
+      }}
     </p>
 
     <div class="card__dates">

projects/social_platform/src/app/office/program/shared/program-card/program-card.component.ts

@@ -43,8 +43,9 @@ export class ProgramCardComponent implements OnInit {
 
   @Input({ required: true }) program?: Program;
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.registerDateExpired = Date.now() > Date.parse(this.program!.datetimeRegistrationEnds);
+  }
 
-  // TODO: изменить когда у нас появятся в информации о программе состояние о завершенности/участии
-  type = "actual";
+  registerDateExpired?: boolean;
 }