fix rate modal with project info & criterias

Author: Awakich

projects/social_platform/src/app/office/features/project-rating/project-rating.component.html

@@ -29,6 +29,39 @@
         placeholder="Небольшой комментарий, если необходимо"
       ></app-textarea>
     </div>
-    } }
+    } }<!-- @format -->
+    <form [formGroup]="form" class="rating">
+      <section class="rating__columns">
+        @for (criterion of criteria; track $index) { @if (criterion.type === "int") {
+        <div class="rating__field">
+          <app-range-criterion-input
+            class="rating__input"
+            [max]="criterion.maxValue!"
+            [formControlName]="criterion.id"
+          ></app-range-criterion-input>
+          <label class="text-body-10">{{ criterion.name }}</label>
+        </div>
+        } @if (criterion.type === "bool") {
+        <div class="rating__field">
+          <app-boolean-criterion
+            class="rating__input"
+            [formControlName]="criterion.id"
+          ></app-boolean-criterion>
+          <label class="text-body-10">{{ criterion.name }}</label>
+        </div>
+        } }
+      </section>
+      <section>
+        @for (criterion of criteria; track $index) { @if (criterion.type === "str") {
+        <div class="rating__comment">
+          <app-textarea
+            size="big"
+            [formControlName]="criterion.id"
+            placeholder="Небольшой комментарий, если необходимо"
+          ></app-textarea>
+        </div>
+        } }
+      </section>
+    </form>
   </section>
 </form>

projects/social_platform/src/app/office/features/project-rating/project-rating.component.scss

@@ -35,7 +35,7 @@
     app-textarea {
       ::ng-deep .field__input {
         min-height: 66px !important;
-        color: var(--dark-grey);
+        color: var(--grey-for-text) !important;
         background-color: transparent;
         border-color: var(--grey-button);
 

projects/social_platform/src/app/office/features/project-rating/project-rating.component.ts

@@ -88,6 +88,20 @@ export class ProjectRatingComponent implements OnDestroy, ControlValueAccessor,
     return this._criteria();
   }
 
+  @Input()
+  set disabled(value: boolean) {
+    this._disabled = value;
+    if (this.form) {
+      value ? this.form.disable() : this.form.enable();
+    }
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  private _disabled = false;
+
   /** Сигнал для хранения критериев оценки */
   _criteria = signal<ProjectRatingCriterion[]>([]);
 
@@ -183,6 +197,10 @@ export class ProjectRatingComponent implements OnDestroy, ControlValueAccessor,
     });
 
     this.form = new FormGroup(formGroupControls);
+
+    if (this.disabled) {
+      this.form.disable();
+    }
   }
 
   /**

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

@@ -63,7 +63,11 @@
         <p class="text-body-12">оценка проекта</p>
         <i appIcon icon="medal" appWidth="8" appHeight="12"></i>
       </div>
-      <app-project-rating [criteria]="project.criterias" [formControl]="form"></app-project-rating>
+      <app-project-rating
+        [criteria]="project.criterias"
+        [formControl]="form"
+        [disabled]="(projectRated() || projectConfirmed()) && !programDateFinished()"
+      ></app-project-rating>
       @if (form | controlError: "required"; as error) {
       <div class="text-body-10 error">
         {{ error }}
@@ -114,7 +118,19 @@
       <div class="cancel">
         <div class="cancel__top">
           <p class="cancel__title text-body-14">подтвердите оценку</p>
-          <i appIcon icon="check" appSquare="60"></i>
+
+          <div class="cancel__project">
+            <app-avatar [size]="50" [url]="project.imageAddress"></app-avatar>
+            <p class="text-body-12">{{ project.name }}</p>
+          </div>
+        </div>
+
+        <div class="cancel__criterias">
+          <app-project-rating
+            [criteria]="project.criterias"
+            [formControl]="form"
+            [disabled]="(projectRated() || projectConfirmed()) && !programDateFinished()"
+          ></app-project-rating>
         </div>
 
         <div class="cancel__buttons">
@@ -123,19 +139,18 @@
             class="cancel__button"
             customTypographyClass="text-body-12"
             (click)="confirmRateProject()"
-            style="width: 100%"
           >
             подтверждаю
           </app-button>
 
           <app-button
             size="big"
             class="cancel__button"
+            appearance="outline"
             customTypographyClass="text-body-12"
             (click)="showConfirmRateModal.set(false)"
-            style="width: 100%"
           >
-            исправить оценку
+            изменить оценку
           </app-button>
         </div>
       </div>

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

@@ -170,18 +170,24 @@
   width: 350px;
   max-height: calc(100vh - 40px);
 
-  i {
-    padding: 36px 0;
-    color: var(--green);
-  }
-
   &__top {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 10px;
   }
 
+  &__project {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 20px 0px;
+  }
+
+  &__criterias {
+    margin-bottom: 20px;
+  }
+
   &__title {
     text-align: center;
   }
@@ -194,8 +200,7 @@
 
   &__buttons {
     display: flex;
-    flex-direction: column;
-    gap: 10px;
+    gap: 20px;
     align-items: center;
     justify-content: center;
   }