modals for empty conditions & fixes of edit project in date pick

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

@@ -63,38 +63,23 @@
         <ng-template #programTpl>
           @if (userType() !== undefined) { @if (!isUserMember && !isUserManager) { @if
           (info().name.includes("Кейс-чемпионат MIR")) {
-          <a href="https://case-champ.ru/corporate#rec1176757836">
-            <app-button
-              [disabled]="!!registerDateExpired"
-              [style.opacity]="registerDateExpired ? '0.5' : '1'"
-              appearance="outline"
-              size="medium"
-              customTypographyClass="text-body-12"
-            >
+          <a
+            (click)="checkPrograRegistrationEnded($event)"
+            href="https://case-champ.ru/corporate#rec1176757836"
+          >
+            <app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
               зарегистрироваться
             </app-button>
           </a>
           } @else if (info().registrationLink) {
-          <a [href]="info().registrationLink">
-            <app-button
-              [disabled]="!!registerDateExpired"
-              [style.opacity]="registerDateExpired ? '0.5' : '1'"
-              appearance="outline"
-              size="medium"
-              customTypographyClass="text-body-12"
-            >
+          <a (click)="checkPrograRegistrationEnded($event)" [href]="info().registrationLink">
+            <app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
               зарегистрироваться
             </app-button>
           </a>
           } @else {
-          <a [routerLink]="['/office/program', info().id, 'register']">
-            <app-button
-              [disabled]="!!registerDateExpired"
-              [style.opacity]="registerDateExpired ? '0.5' : '1'"
-              appearance="outline"
-              size="medium"
-              customTypographyClass="text-body-12"
-            >
+          <a (click)="checkPrograRegistrationEnded($event)">
+            <app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
               зарегистрироваться
             </app-button>
           </a>
@@ -310,6 +295,19 @@
               </app-button>
             </div>
           </app-modal>
+
+          <app-modal
+            [open]="isProgramEndedModalOpen()"
+            (openChange)="isProgramEndedModalOpen.set(!isProgramEndedModalOpen())"
+          >
+            <div class="cancel" style="padding: 24px">
+              <div class="cancel__top">
+                <p class="cancel__title text-body-14">к сожалению, программа уже завершена!</p>
+              </div>
+
+              <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+            </div>
+          </app-modal>
         </ng-template>
 
         <ng-template #projectTpl>

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

@@ -103,6 +103,7 @@ export class DeatilComponent implements OnInit, OnDestroy {
   // Переменные для работы с модалками
   isAssignProjectToProgramModalOpen = signal(false);
   showSubmitProjectModal = signal(false);
+  isProgramEndedModalOpen = signal(false);
   isLeaveProjectModalOpen = false; // Флаг модального окна выхода
   isEditDisable = false; // Флаг недоступности редактирования
   isEditDisableModal = false; // Флаг недоступности редактирования для модалки
@@ -369,6 +370,24 @@ export class DeatilComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Проверка завершения программы перед регистрацией
+   */
+  checkPrograRegistrationEnded(event: Event): void {
+    const program = this.info();
+
+    if (
+      program?.datetimeRegistrationEnds &&
+      Date.now() > Date.parse(program.datetimeRegistrationEnds)
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isProgramEndedModalOpen.set(true);
+    } else {
+      this.router.navigateByUrl("/office/program/" + this.info().id + "/register");
+    }
+  }
+
   /**
    * Обновляет состояния страниц на основе URL
    */

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

@@ -2,8 +2,9 @@
 
 <div class="page">
   <app-feed-filter class="page__filter"></app-feed-filter>
-  <div #feedRoot class="page__feed">
-    @for (item of feedItems(); track item.content.id) { @if (item.typeModel === "vacancy") {
+  <div #feedRoot class="page__feed" [style.column-count]="feedItems().length > 0 ? '2' : '1'">
+    @if (feedItems().length > 0) { @for (item of feedItems(); track item.content.id) { @if
+    (item.typeModel === "vacancy") {
     <app-open-vacancy
       class="page__item"
       [attr.data-id]="item.content.id"
@@ -35,6 +36,11 @@
       [resourceLink]="['/office/projects', item.content.contentObject.id]"
       (like)="onLike($event)"
     ></app-news-card>
-    } } }
+    } } } } @else {
+    <div class="page__feed--no-items">
+      <i appIcon icon="empty-chat" appSquare="38"></i>
+      <p class="text-body-12">в данном разделе пока нет новостей</p>
+    </div>
+    }
   </div>
 </div>

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

@@ -9,6 +9,20 @@
   &__feed {
     column-count: 2;
     column-gap: 20px;
+
+    &--no-items {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 70px;
+
+      i,
+      p {
+        color: var(--grey-for-text);
+      }
+    }
   }
 
   &__item {

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

@@ -23,16 +23,19 @@ import { ProfileNewsService } from "@office/profile/detail/services/profile-news
 import { FeedFilterComponent } from "@office/feed/filter/feed-filter.component";
 import { NewsCardComponent } from "@office/features/news-card/news-card.component";
 import { OpenVacancyComponent } from "./shared/open-vacancy/open-vacancy.component";
+import { IconComponent } from "@ui/components";
 
 @Component({
   selector: "app-feed",
   standalone: true,
   imports: [
     CommonModule,
+    IconComponent,
     NewProjectComponent,
     FeedFilterComponent,
     NewsCardComponent,
     OpenVacancyComponent,
+    IconComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./feed.component.html",

projects/social_platform/src/app/office/projects/edit/shared/project-achievement-step/project-achievement-step.component.html

@@ -37,7 +37,7 @@
               [tooltipPosition]="'left'"
               [tooltipWidth]="300"
               [error]="achievementsDate | controlError"
-              type="text"
+              type="date"
               placeholder="2022"
               mask="0000"
               formControlName="status"

projects/social_platform/src/app/office/vacancies/detail/info/info.component.scss

@@ -151,8 +151,6 @@
     &:hover {
       color: var(--accent-dark);
     }
-
-    @include typography.body-14;
   }
 
   .about {

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

@@ -8,8 +8,8 @@
     </app-project-vacancy-card>
     } }
   </div>
-  } @if (type() === 'my') { @if (responsesList().length) { @for (response of responsesList(); track
-  $index) {
+  } @if (type() === 'my') { @if (responsesList().length > 0) { @for (response of responsesList();
+  track $index) {
   <app-response-card [response]="response"></app-response-card>
   }
   <app-modal [open]="isMyModal()" (openChange)="isMyModal.set(!isMyModal())">
@@ -24,5 +24,13 @@
       </a>
     </div>
   </app-modal>
-  } @else { } }
+  } @else {
+  <div class="page__vacancies--no-items">
+    <i appIcon icon="empty-chat" appSquare="38"></i>
+    <p class="text-body-12">
+      в данном разделе пока нет ваших откликов : - ( <br />
+      давайте это <a routerLink="/office/vacancies/all/" style="color: var(--accent)">исправим</a>
+    </p>
+  </div>
+  } }
 </div>

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

@@ -6,6 +6,21 @@
     display: grid;
     grid-template-columns: 333px 333px;
     grid-gap: 20px;
+
+    &--no-items {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 70px;
+      text-align: center;
+
+      i,
+      p {
+        color: var(--grey-for-text);
+      }
+    }
   }
 
   &__item {

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

@@ -4,6 +4,7 @@
   <div class="field__left-icon">
     <ng-content select="left-icon"></ng-content>
   </div>
+
   @if (type === 'radio') {
   <input
     type="radio"
@@ -13,6 +14,24 @@
     (change)="onRadioChange($event)"
     class="field__input"
   />
+  } @else if (type === 'date') {
+  <input
+    matInput
+    [matDatepicker]="picker"
+    [value]="dateValue"
+    (dateChange)="onDateChange($event)"
+    (click)="picker.open()"
+    [placeholder]="placeholder"
+    class="field__input"
+    [class.field__input--error]="error"
+    [class.field__input--small]="size === 'small'"
+    [class.field__input--small--error]="size === 'small' && error"
+    [class.field__input--big]="size === 'big'"
+    [class.field__input--with-tooltip]="size !== 'small' && haveHint"
+    [class.field__input--border]="hasBorder"
+    readonly
+  />
+  <mat-datepicker #picker></mat-datepicker>
   } @else {
   <input
     [value]="value"
@@ -55,6 +74,7 @@
     ></app-tooltip>
   </div>
   }
+
   <div
     class="field__right-icon"
     [ngStyle]="{