add truncate pipe & fix components profile/program/project description issue

Author: Awakich

projects/core/src/lib/pipes/truncate.pipe.ts

@@ -0,0 +1,14 @@
+/** @format */
+
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "truncate",
+  standalone: true,
+})
+export class TruncatePipe implements PipeTransform {
+  transform(value: string | null | undefined, limit = 30, ellipsis = "..."): string {
+    if (!value) return "";
+    return value.length > limit ? value.slice(0, limit) + ellipsis : value;
+  }
+}

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

@@ -221,11 +221,7 @@
                       <div class="project__item--info">
                         <app-avatar [url]="project.imageAddress" [size]="40"></app-avatar>
                         <p class="text-body-12">
-                          {{
-                            project.name.length > 20
-                              ? project.name.slice(0, 16) + "..."
-                              : project.name
-                          }}
+                          {{ project.name | truncate: 20 }}
                         </p>
                       </div>
                       <app-input

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

@@ -26,6 +26,7 @@ import { ProfileService } from "projects/skills/src/app/profile/services/profile
 import { SnackbarService } from "@ui/services/snackbar.service";
 import { ApproveSkillComponent } from "../approve-skill/approve-skill.component";
 import { ProjectsService } from "@office/projects/services/projects.service";
+import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 
 @Component({
   selector: "app-detail",
@@ -42,6 +43,7 @@ import { ProjectsService } from "@office/projects/services/projects.service";
     TooltipComponent,
     InputComponent,
     ApproveSkillComponent,
+    TruncatePipe,
   ],
   standalone: true,
 })

projects/social_platform/src/app/office/features/info-card/info-card.component.html

@@ -77,19 +77,17 @@
 </ng-template>
 
 <ng-template #regularCardHeader>
-  @if (type === 'projects' || type === 'invite') { @if (info.name) { @if(info.name.length > 12) {
-  <p class="text-body-12 card__name">{{ info.name.slice(0, 12) }}...</p>
-  } @else {
-  <p class="text-body-12 card__name">{{ info.name }}</p>
-  } } @if (industryService.industries | async; as industries) {
+  @if (type === 'projects' || type === 'invite') { @if (info.name) {
+  <p class="text-body-12 card__name">{{ info.name | truncate: 12 }}</p>
+  } @if (industryService.industries | async; as industries) {
   <p class="text-body-6 card__industry">
     @if (industryService.getIndustry(industries, info?.industry!); as industry) {
     <span>{{ industry?.name }}</span>
     }
   </p>
   } } @else {
-  <p class="text-body-12 card__name">{{ info?.firstName }}</p>
-  <p class="text-body-12 card__name">{{ info?.lastName }}</p>
+  <p class="text-body-12 card__name">{{ info?.firstName | truncate: 10 }}</p>
+  <p class="text-body-12 card__name">{{ info?.lastName | truncate: 10 }}</p>
   @if (info?.speciality) {
   <p class="text-body-6 card__additional-info">
     {{ info?.speciality }}
@@ -116,7 +114,7 @@
       @for ( skill of info?.skills?.slice(0, 3); track skill.id ) {
       <li class="card__skill">
         <app-tag [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'">{{
-          skill.name.length > 10 ? skill.name.slice(0, 10) + " " + "..." : skill.name
+          skill.name | truncate: 10
         }}</app-tag>
       </li>
       }

projects/social_platform/src/app/office/features/info-card/info-card.component.ts

@@ -12,6 +12,7 @@ import { ClickOutsideModule } from "ng-click-outside";
 import { Router, RouterLink } from "@angular/router";
 import { TagComponent } from "@ui/components/tag/tag.component";
 import { YearsFromBirthdayPipe } from "@corelib";
+import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 
 /**
  * Компонент карточки информации с разным наполнением, в зависимости от контекста
@@ -31,6 +32,7 @@ import { YearsFromBirthdayPipe } from "@corelib";
     ClickOutsideModule,
     TagComponent,
     YearsFromBirthdayPipe,
+    TruncatePipe,
     RouterLink,
   ],
 })

projects/social_platform/src/app/office/features/invite-card/invite-card.component.html

@@ -4,7 +4,7 @@
 <div class="invite">
   <div class="invite__info">
     <div class="invite__top">
-      <p class="text-body-12">{{ invite.role }}</p>
+      <p class="text-body-12">{{ invite.role | truncate: 30 }}</p>
       @if(invite.isAccepted === null) {
       <p class="text-body-12 invite__status">• приглашение отправлено</p>
       }
@@ -13,7 +13,7 @@
     <div class="invite__user">
       <app-avatar [url]="invite.user.avatar" [size]="40"></app-avatar>
       <h3 class="text-body-12 invite__role">
-        {{ invite.user.firstName }} {{ invite.user.lastName }}
+        {{ invite.user.firstName | truncate: 15 }} {{ invite.user.lastName | truncate: 15 }}
       </h3>
     </div>
   </div>

projects/social_platform/src/app/office/features/invite-card/invite-card.component.ts

@@ -9,6 +9,7 @@ import { IconComponent, ButtonComponent, SelectComponent, InputComponent } from
 import { ModalComponent } from "@ui/components/modal/modal.component";
 import { rolesMembersList } from "projects/core/src/consts/lists/roles-members-list.const";
 import { AvatarComponent } from "@ui/components/avatar/avatar.component";
+import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 
 /**
  * Компонент карточки приглашения в команду или проект
@@ -38,6 +39,7 @@ import { AvatarComponent } from "@ui/components/avatar/avatar.component";
     ModalComponent,
     SelectComponent,
     ControlErrorPipe,
+    TruncatePipe,
     ReactiveFormsModule,
     InputComponent,
     AvatarComponent,

projects/social_platform/src/app/office/features/news-card/news-card.component.html

@@ -8,7 +8,7 @@
         [alt]="feedItem.name"
       />
       <p class="card__name text-body-10">
-        {{ feedItem.name.length > 30 ? feedItem.name.slice(0, 26) + "..." : feedItem.name }}
+        {{ feedItem.name | truncate: 30 }}
       </p>
     </a>
     @if (isOwner) {

projects/social_platform/src/app/office/features/news-card/news-card.component.ts

@@ -33,6 +33,7 @@ import { TextareaComponent } from "@ui/components/textarea/textarea.component";
 import { ClickOutsideModule } from "ng-click-outside";
 import { CarouselComponent } from "@office/shared/carousel/carousel.component";
 import { ImgCardComponent } from "@office/shared/img-card/img-card.component";
+import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 
 /**
  * Компонент карточки новости
@@ -55,6 +56,7 @@ import { ImgCardComponent } from "@office/shared/img-card/img-card.component";
     ButtonComponent,
     DayjsPipe,
     FormControlPipe,
+    TruncatePipe,
     ParseLinksPipe,
     ParseBreaksPipe,
     CarouselComponent,

projects/social_platform/src/app/office/features/vacancy-card/vacancy-card.component.html

@@ -4,7 +4,7 @@
 <div class="vacancy">
   <div class="vacancy__info">
     <div class="vacancy__info--text">
-      <h3 class="text-body-12 vacancy__role">{{ vacancy.role }}</h3>
+      <h3 class="text-body-12 vacancy__role">{{ vacancy.role | truncate: 20 }}</h3>
     </div>
     <div class="vacancy__skills">
       @if (vacancy.requiredSkills.length) { @for (skill of vacancy.requiredSkills.slice(0, 5); track