Единая текущая карточка программы для обеих вкладок

projects/social_platform/src/app/domain/program/program-launch.model.ts

@@ -1,6 +1,7 @@
 /** @format */
 import { Program } from "./program.model";
 import { ManagementPage } from "./program-management.model";
+import { ProgramImageFraming } from "./program-image-framing.model";
 
 export type ProgramFormat = "case_championship" | "hackathon" | "noncompetitive";
 export const PROGRAM_FORMATS: { id: ProgramFormat; label: string; description: string }[] = [
@@ -24,6 +25,8 @@ export interface ManagedProgram {
   id: number;
   name: string;
   draft: boolean;
+  imageAddress?: string | null;
+  imageFraming?: ProgramImageFraming | null;
   programFormat: ProgramFormat | null;
   solutionStorageMode?: "legacy_project" | "solution";
   updatedAt: string;

projects/social_platform/src/app/ui/pages/program/main/main.component.scss

@@ -1,5 +1,11 @@
 @use "styles/responsive";
 
+:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
 .programs {
   display: grid;
   grid-template-columns: 1fr;

projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html

@@ -1,94 +1,120 @@
 <!-- @format -->
-
-@if (desktopLayout()) {
-  @if (program()) {
+<div class="program-card" [class.program-card--managed]="management()">
+  @if (desktopLayout()) {
     <div class="card">
       <div class="card__photo">
         <app-avatar
-          [url]="program().imageAddress"
+          [url]="program().imageAddress || ''"
           [imageFraming]="program().imageFraming?.logo ?? null"
           [size]="100"
-        ></app-avatar>
+        />
       </div>
-
       <div class="card__info">
-        <p class="text-body-10 card__name" style="padding-left: 25px">{{ program().name }}</p>
-
+        <p class="text-body-10 card__name" style="padding-left: 25px" [title]="program().name">
+          {{ program().name }}
+        </p>
         <p
           class="text-body-10 card__description card__registration"
-          [ngClass]="{
-            'card__registration--ended': registerDateExpired,
-            'card__registration--participating': !registerDateExpired && program().isUserMember,
-            'card__registration--actual':
-              !registerDateExpired && (!program().isUserMember || !program().isUserManager),
-          }"
+          [ngClass]="'card__registration--' + registrationState()"
         >
-          <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
-          {{
-            registerDateExpired
-              ? "регистрация завершена"
-              : program().isUserMember
-                ? "ты уже участвуешь!"
-                : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
-          }}
+          <ng-container [ngTemplateOutlet]="registrationText" />
         </p>
-
         <div class="card__dates">
-          <p class="text-body-10 card__description" style="padding-left: 25px">
-            {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
-          </p>
-          <p class="text-body-10 card__description">-</p>
-          <p class="text-body-10 card__description">
-            {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
-          </p>
-          <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
-          <p class="text-body-10 card__description">• для всей России</p>
+          @if (program().datetimeStarted && program().datetimeFinished) {
+            <p class="text-body-10 card__description" style="padding-left: 25px">
+              {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
+            </p>
+            <p class="text-body-10 card__description">-</p>
+            <p class="text-body-10 card__description">
+              {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+            </p>
+            <p class="text-body-10 card__description">• для всей России</p>
+          } @else {
+            <p class="text-body-10 card__description" style="padding-left: 25px">
+              {{
+                program().datetimeStarted || program().datetimeFinished
+                  ? "Сроки заполнены не полностью"
+                  : "Сроки не заданы"
+              }}
+            </p>
+          }
         </div>
       </div>
     </div>
-  }
-} @else {
-  @if (program()) {
-    <div appCard [interactive]="true" class="card">
+  } @else {
+    <div appCard [interactive]="!management()" class="card">
       <div class="card__photo">
         <app-avatar
-          [url]="program().imageAddress"
+          [url]="program().imageAddress || ''"
           [imageFraming]="program().imageFraming?.logo ?? null"
           [size]="64"
-        ></app-avatar>
+        />
       </div>
-
       <div class="card__info">
         <h3 class="card__name" [title]="program().name">{{ program().name }}</h3>
-
         <p
           class="card__description card__registration"
-          [ngClass]="{
-            'card__registration--ended': registerDateExpired,
-            'card__registration--participating': !registerDateExpired && program().isUserMember,
-            'card__registration--actual':
-              !registerDateExpired && (!program().isUserMember || !program().isUserManager),
-          }"
+          [ngClass]="'card__registration--' + registrationState()"
         >
-          <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
-          {{
-            registerDateExpired
-              ? "регистрация завершена"
-              : program().isUserMember
-                ? "ты уже участвуешь!"
-                : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
-          }}
+          <ng-container [ngTemplateOutlet]="registrationText" />
         </p>
-
         <div class="card__dates">
-          <p class="card__description">
-            {{ program().datetimeStarted | date: "dd.MM.yyyy" }} -
-            {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
-          </p>
-          <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
-          <p class="card__description card__region">для всей России</p>
+          @if (program().datetimeStarted && program().datetimeFinished) {
+            <p class="card__description">
+              {{ program().datetimeStarted | date: "dd.MM.yyyy" }} -
+              {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+            </p>
+            <p class="card__description card__region">для всей России</p>
+          } @else {
+            <p class="card__description">
+              {{
+                program().datetimeStarted || program().datetimeFinished
+                  ? "Сроки заполнены не полностью"
+                  : "Сроки не заданы"
+              }}
+            </p>
+          }
         </div>
       </div>
     </div>
   }
-}
+  @if (management()) {
+    <div class="program-card__actions">
+      <p class="program-card__publication">
+        {{ program().draft ? "Не виден участникам" : "Опубликована" }}
+      </p>
+      <a
+        appButton="secondary"
+        [class.program-card__continue]="program().draft"
+        [routerLink]="
+          program().draft
+            ? paths.program.launch(program().id)
+            : paths.program.management(program().id)
+        "
+        [attr.aria-label]="
+          (program().draft ? 'Продолжить настройку: ' : 'Управлять: ') + program().name
+        "
+        >{{ program().draft ? "Продолжить настройку" : "Управлять" }}</a
+      >
+    </div>
+  }
+</div>
+<ng-template #registrationText>
+  @switch (registrationState()) {
+    @case ("draft") {
+      Черновик
+    }
+    @case ("ended") {
+      регистрация завершена
+    }
+    @case ("participating") {
+      ты уже участвуешь!
+    }
+    @case ("actual") {
+      Регистрация до {{ program().datetimeRegistrationEnds | date: "dd MMMM" }}
+    }
+    @default {
+      Срок регистрации не задан
+    }
+  }
+</ng-template>

projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss

@@ -2,8 +2,77 @@
 
 @use "styles/ui-foundation";
 @use "styles/responsive";
+@use "styles/program-management-controls";
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.program-card {
+  &__actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+
+  &__publication {
+    min-width: 0;
+    margin: 0;
+    font-size: 10px;
+    line-height: 13px;
+    color: var(--dark-grey);
+  }
+
+  .ui-button.ui-button {
+    @include ui-foundation.button;
+    @include program-management-controls.compact-action;
+
+    flex-shrink: 0;
+    min-width: 110px;
+  }
+
+  .program-card__continue {
+    width: 188px;
+  }
+}
+
+.card__registration--draft,
+.card__registration--not-set {
+  background: var(--dark-grey);
+}
 
 @media screen and (max-width: 999px) {
+  .program-card--managed {
+    @include ui-foundation.card;
+
+    .card {
+      padding: 0;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .program-card__actions {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+
+    .ui-button.ui-button {
+      justify-self: stretch;
+      width: 100%;
+      min-height: 44px;
+    }
+  }
+
+  .program-card__publication {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
   .card {
     @include ui-foundation.card;
 
@@ -72,6 +141,21 @@
 }
 
 @media screen and (min-width: 1000px) {
+  .program-card {
+    max-width: 333px;
+  }
+
+  .program-card--managed {
+    .card__info {
+      flex: 1;
+    }
+
+    .ui-button.ui-button.program-card__continue {
+      padding-inline: 12px;
+      white-space: nowrap;
+    }
+  }
+
   .card {
     position: relative;
     display: flex;