carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/rating_review/pipes/date-formating.pipe.ts

@@ -0,0 +1,42 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+@Pipe({
+  name: 'dateFormating'
+})
+export class DateFormatingPipe implements PipeTransform {
+
+  transform(value: Date | string | number): string {
+    if (!value) return '';
+
+    const date = new Date(value);
+    const now = new Date();
+
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+
+    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+    const timeOptions: Intl.DateTimeFormatOptions = {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    };
+    const timeString = date.toLocaleTimeString([], timeOptions);
+
+    if (targetDate.getTime() === today.getTime()) {
+      return `Today, ${timeString}`;
+    } else if (targetDate.getTime() === yesterday.getTime()) {
+      return `Yesterday, ${timeString}`;
+    } else {
+      const dateOptions: Intl.DateTimeFormatOptions = {
+        month: '2-digit',
+        day: '2-digit',
+        year: '2-digit'
+      };
+      const dateString = date.toLocaleDateString([], dateOptions);
+      return `${dateString}, ${timeString}`;
+    }
+  }
+  
+}

package/projects/carriera-intern-components/src/app/components/rating_review/rating-review/rating-review/rating-review.component.html

@@ -0,0 +1,57 @@
+<div
+  [class]="{
+    'filter-toggle': true,
+    active: show()
+  }"
+  [ngbPopover]="popoverReview"
+  popoverClass="tagPopover popover-review"
+  (hidden)="handleClose()"
+  container="body"
+  placement="bottom-start"
+  [autoClose]="'outside'"
+  (shown)="handleOpen()"
+>
+  <div
+    class="filter-wrapper"
+    [ngbTooltip]="inCard ? 'Show Rating & Review' : 'Show Reviews'"
+    triggers="mouseenter:mouseleave"
+    tabindex="0"
+    tooltipClass="tooltip tooltip-m-b-2"
+    placement="bottom"
+  >
+    <div
+      [class]="{
+        'toggle-group': true,
+        'empty-state': countLikes === 0,
+        'most-likes': onReturnMost() === FilterType.LIKES
+      }"
+    >
+      <svg-icon class="like-icon" name="cai-like" />
+      <div class="count">{{ countLikes }}</div>
+    </div>
+    <div
+      [class]="{
+        'toggle-group': true,
+        'empty-state': countDislikes === 0,
+        'most-dislikes': onReturnMost() === FilterType.DISLIKES
+      }"
+    >
+      <svg-icon class="dislike-icon" name="cai-dislike" />
+      <div class="count">{{ countDislikes }}</div>
+    </div>
+    <div
+      [class]="{
+        'toggle-group': true,
+        'empty-state': countReviews === 0
+      }"
+    >
+      <svg-icon class="edit-icon" name="cai-edit2" />
+      <div class="count">{{ countReviews }}</div>
+    </div>
+  </div>
+</div>
+<ng-template #popoverReview>
+  <div class="popover-review">
+    <cai-review-modal [titleInput]="titleInput" [ratingReviews]="ratingReviews" [modaltype]="modaltype" />
+  </div>
+</ng-template>

package/projects/carriera-intern-components/src/app/components/rating_review/rating-review/rating-review/rating-review.component.scss

@@ -0,0 +1,94 @@
+@use "../../../../../styles/review_variables.scss" as *;
+
+svg-icon {
+  width: 18px;
+  height: 18px;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+}
+
+.filter-toggle {
+  max-width: 140px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .filter-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    border-radius: 2px;
+    padding: 4px;
+    position: relative;
+
+    .toggle-group {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+
+      .count {
+        width: 16px;
+        height: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 14px;
+        text-align: center;
+        color: $color-review-icon-dark-hover;
+      }
+      svg-icon {
+        color: $color-review-icon-dark;
+        
+      }
+
+      &.most-likes {
+        svg-icon {
+          color: $color-like;
+          
+        }
+      }
+      &.most-dislikes {
+        svg-icon {
+          color: $color-dislike !important;
+          
+        }
+      }
+    }
+    .empty-state {
+      svg-icon {
+        color: $color-icon;
+        
+      }
+      .count {
+        color: $color-text-gray !important;
+      }
+    }
+  }
+
+  &:hover > .filter-wrapper {
+    background-color: $color-filter-hover;
+    cursor: pointer;
+  }
+
+  &.active {
+    .filter-wrapper {
+      background-color: $color-modal-dark-bg;
+      .toggle-group {
+        .count {
+          color: $color-white !important;
+        }        
+      }
+      .empty-state {
+        .count {
+          color: $color-text-gray !important;
+        }
+      }
+    }
+  }
+}

package/projects/carriera-intern-components/src/app/components/rating_review/rating-review/rating-review/rating-review.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RatingReviewComponent } from './rating-review.component';
+
+describe('RatingReviewComponent', () => {
+  let component: RatingReviewComponent;
+  let fixture: ComponentFixture<RatingReviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RatingReviewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RatingReviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/carriera-intern-components/src/app/components/rating_review/rating-review/rating-review/rating-review.component.ts

@@ -0,0 +1,105 @@
+import { Component, Input, signal, SimpleChanges } from '@angular/core';
+import { ReviewModalComponent } from '../../review-modal/review-modal.component';
+import { IReview } from '../../../../models/review.model';
+import { SvgIconComponent } from 'angular-svg-icon';
+import { SingleReviewComponent } from '../../single-review/single-review.component';
+import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { FilterType } from '../../enums/filter-type.enum';
+
+@Component({
+  selector: 'cai-rating-review',
+  imports: [
+    ReviewModalComponent,
+    SvgIconComponent,
+    NgbTooltipModule,
+    NgbPopoverModule,
+  ],
+  templateUrl: './rating-review.component.html',
+  styleUrl: './rating-review.component.scss',
+})
+export class RatingReviewComponent {
+
+  public FilterType = FilterType;
+
+  ngOnInit(): void {
+    this.initializeReviewsData();
+    if (this.inCard) {
+      this.titleInput = 'Find Title';
+    } else {
+      this.titleInput = 'Search';
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['reviews']) {
+      this.initializeReviewsData();
+    }
+  }
+
+  @Input({ required: true }) ratingReviews!: IReview[];
+  @Input() inCard!: boolean;
+  @Input({ required: true }) modaltype!: string;
+
+  countLikes: number = 0;
+  countDislikes: number = 0;
+  countReviews: number = 0;
+  titleInput: string = '';
+  show = signal<boolean>(false);
+
+  onReturnMost(): string {
+    if (this.countLikes > this.countDislikes) {
+      return 'likes';
+    } else if (this.countDislikes > this.countLikes) {
+      return 'dislikes';
+    }
+    return '';
+  }
+
+  /**
+   * Initializes review data when the component is initialized or when the `reviews` input changes.
+   * It copies the original reviews array, resets counters, calculates new counts, and
+   * sets the `disabled` signal if a personal review already exists.
+   * @private
+   */
+  private initializeReviewsData(): void {
+    if (this.ratingReviews) {
+      this.resetCounts();
+      this.calculateReviewCounts();
+    }
+  }
+
+  /**
+   * Resets the counts for likes, dislikes, and written reviews to zero.
+   * @private
+   */
+  private resetCounts(): void {
+    this.countLikes = 0;
+    this.countDislikes = 0;
+    this.countReviews = 0;
+  }
+
+  /**
+   * Iterates through the `reviews` array and calculates the total number of likes,
+   * dislikes, and written reviews (those with a non-empty `value`).
+   * @private
+   */
+  private calculateReviewCounts(): void {
+    this.ratingReviews.forEach((review) => {
+      if (review.thumb === 'like') {
+        this.countLikes++;
+      } else if (review.thumb === 'dislike') {
+        this.countDislikes++;
+      } else if (review.comment && review.comment.length > 0) {
+        this.countReviews++;
+      }
+    });
+  }
+
+  handleOpen() {
+    this.show.set(true);
+  }
+
+  handleClose() {
+    this.show.set(false);
+  }
+}