carriera-intern 0.0.0

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

@@ -0,0 +1,360 @@
+import { IReview } from './../../../models/review.model';
+import { InputComponent } from './../../input/input.component';
+import {
+  Component,
+  Input,
+  input,
+  signal,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { SvgIconComponent } from 'angular-svg-icon';
+import { SingleReviewComponent } from '../single-review/single-review.component';
+import { CommonModule } from '@angular/common';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { ReviewType } from '../enums/review-type.enum';
+import { FilterType } from '../enums/filter-type.enum';
+import { Filter } from '../../input-address/stories/address.stories';
+
+@Component({
+  selector: 'cai-review-modal',
+  standalone: true,
+  imports: [
+    SvgIconComponent,
+    SingleReviewComponent,
+    CommonModule,
+    NgbTooltipModule,
+    InputComponent,
+  ],
+  templateUrl: './review-modal.component.html',
+  styleUrl: './review-modal.component.scss',
+})
+export class ReviewModalComponent implements OnInit, OnChanges {
+  //enums
+  public ReviewType = ReviewType;
+  public FilterType = FilterType;
+
+  ngOnInit(): void {
+    this.initializeReviewsData();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['ratingReviews']) {
+      this.initializeReviewsData();
+    }
+  }
+
+  @Input() ratingReviews!: IReview[];
+  @Input() modaltype!: string;
+  @Input() titleInput!: string;
+
+  @Output() reviewDeleted = new EventEmitter<void>();
+
+  activeLikes = signal<boolean>(false);
+  activeDislikes = signal<boolean>(false);
+  activeReviews = signal<boolean>(false);
+  disabled = signal<boolean>(false);
+  addingReview = signal<boolean>(false);
+
+  presentReviews: IReview[] = [];
+
+  testReview: IReview = {
+    ratingId: 5,
+    thumb: '',
+    reviewId: 5,
+    comment: '',
+    isEdited: false,
+    companyUserId: 5,
+    isItCurrentCompanyUser: true,
+    createdAt: '',
+    updatedAt: '',
+    companyUser: {
+      id: 5,
+      userId: 5,
+      fullName: 'James Garcia',
+      avatarFile: {
+        driver: {
+          id: 0,
+          firstName: 'James',
+          lastName: 'Garcia',
+          avatarFile: undefined,
+          avatarColor: 'Yellow',
+        },
+        size: 22,
+        rounded: true,
+        inverse: false,
+      },
+      departmentId: 2,
+    },
+  };
+
+  countLikes: number = 0;
+  countDislikes: number = 0;
+  countReviews: number = 0;
+  hasPersonalReview: boolean = false;
+  currentActiveFilter: string = FilterType.ALL;
+
+  onReturnMost(): string {
+    if (this.countLikes > this.countDislikes) {
+      return 'likes';
+    } else if (this.countDislikes > this.countLikes) {
+      return 'dislikes';
+    }
+    return '';
+  }
+
+  /**
+   * Adds a new empty review to the `presentReviews` list and sets `addingReview` to `true`.
+   * This review is marked as "personal" and pre-filled with basic user data.
+   */
+  onAddReview(): void {
+    this.addingReview.set(true);
+    this.disabled.set(true);
+    this.hasPersonalReview = true;
+    const newId =
+      this.ratingReviews.length > 0
+        ? Math.max(...this.ratingReviews.map((r) => r.reviewId)) + 1
+        : 1;
+    const date = new Date();
+    this.testReview = {
+      ...this.testReview,
+      reviewId: newId,
+      comment: '',
+      thumb: '',
+      isEdited: false,
+      createdAt: date.toString(),
+      updatedAt: '',
+    };
+  }
+
+  onEditedReview(ev: { review: IReview; edited: boolean }) {
+    const index = this.ratingReviews.findIndex(
+      (r) => r.reviewId === ev.review.reviewId
+    );
+    if (index > -1) {
+      this.ratingReviews[index] = ev.review;
+      this.presentReviews = [...this.ratingReviews];
+      this.initializeReviewsData();
+    }
+  }
+
+  onGetReview(ev: { review: IReview }) {
+    if (ev.review.isEdited) {
+      const index = this.ratingReviews.findIndex(
+        (r) => r.reviewId === ev.review.reviewId
+      );
+      if (index > -1) {
+        this.ratingReviews[index] = ev.review;
+      }
+    } else {
+      this.ratingReviews.unshift(ev.review);
+    }
+    this.addingReview.set(false);
+    this.presentReviews = [...this.ratingReviews];
+    this.initializeReviewsData();
+  }
+
+  handleSearch(event: string | number | null) {
+    if (!event) {
+      this.presentReviews = [...this.ratingReviews];
+      return;
+    }
+    const search = event.toString().toLowerCase().trim();
+
+    this.presentReviews = this.ratingReviews.filter(
+      (r) =>
+        r.companyUser.fullName.toLowerCase().includes(search) ||
+        r.comment.toLowerCase().includes(search)
+    );
+  }
+
+  handleClear(event: void) {
+    this.presentReviews = [...this.ratingReviews];
+  }
+
+  /**
+   * 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.presentReviews = [...this.ratingReviews];
+      this.onCheckPersonal();
+      this.resetCounts();
+      this.calculateReviewCounts();
+      this.disabled.set(
+        this.ratingReviews.some((x) => x.isItCurrentCompanyUser === true)
+      );
+    }
+  }
+
+  /**
+   * 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++;
+      }
+      if (review.comment && review.comment.length > 0) {
+        this.countReviews++;
+      }
+    });
+  }
+
+  onSwitchActive(value: string): void {
+    this.currentActiveFilter = value;
+  }
+
+  /**
+   * Changes the displayed reviews in `presentReviews` based on the selected type.
+   * It filters the original `reviews` array to show only likes, dislikes,
+   * written reviews, or all reviews.
+   * @param type The type of reviews to display: 'likes', 'dislikes', 'reviews' (only written), or 'all'.
+   */
+  onChangePresentReviews(type: FilterType): void {
+    this.presentReviews = [];
+    switch (type) {
+      case FilterType.LIKES:
+        this.ratingReviews.forEach((x) => {
+          if (x.thumb == 'like') {
+            this.presentReviews.push(x);
+          }
+        });
+        break;
+      case FilterType.DISLIKES:
+        this.ratingReviews.forEach((x) => {
+          if (x.thumb == 'dislike') {
+            this.presentReviews.push(x);
+          }
+        });
+        break;
+      case FilterType.REVIEWS:
+        this.onSwitchActive(FilterType.REVIEWS);
+        this.ratingReviews.forEach((x) => {
+          if (x.comment.length > 0) {
+            this.presentReviews.push(x);
+          }
+        });
+        break;
+      case FilterType.RATING:
+        this.onSwitchActive(FilterType.RATING);
+        this.ratingReviews.forEach((x) => {
+          if (x.thumb == 'like' || x.thumb == 'dislike') {
+            this.presentReviews.push(x);
+          }
+        });
+        break;
+      case FilterType.ALL:
+        this.onSwitchActive(FilterType.ALL);
+        this.presentReviews = [...this.ratingReviews];
+        break;
+    }
+  }
+
+  /**
+   * Updates the value and edit time of an existing review in the `presentReviews` list.
+   * Sets the `edited` flag to `true` for the modified review.
+   * @param updatedData An object containing the review's ID, the new text value, and the new edit time.
+   */
+  onChangeValue(updatedData: {
+    id: number;
+    value: string;
+    newTime: string;
+  }): void {
+    for (let i = 0; i < this.presentReviews.length; i++) {
+      if (this.presentReviews[i].reviewId === updatedData.id) {
+        this.presentReviews[i].comment = updatedData.value;
+        this.presentReviews[i].updatedAt = updatedData.newTime;
+        this.presentReviews[i].isEdited = true;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Initiates the review deletion process.
+   * Currently, it logs a message to the console and emits the `reviewDeleted` event.
+   * The logic for actual removal from `presentReviews` is commented out.
+   * @param id The ID of the review to be deleted.
+   */
+  onDeleteReview(id: number): void {
+    this.ratingReviews = this.ratingReviews.filter(
+      (review) => review.reviewId !== id
+    );
+    this.addingReview.set(false);
+    this.hasPersonalReview = false;
+    this.disabled.set(false);
+
+    this.initializeReviewsData();
+  }
+
+  onCheckPersonal(): void {
+    this.ratingReviews.forEach((x) => {
+      if (x.isItCurrentCompanyUser) {
+        this.hasPersonalReview = true;
+        return;
+      }
+    });
+  }
+
+  onSelectFilter(type: FilterType) {
+    switch (type) {
+      case FilterType.LIKES:
+        this.activeDislikes.set(false);
+        this.activeReviews.set(false);
+        this.activeLikes.set(true);
+        this.onChangePresentReviews(FilterType.LIKES);
+        break;
+      case FilterType.DISLIKES:
+        this.activeDislikes.set(true);
+        this.activeReviews.set(false);
+        this.activeLikes.set(false);
+        this.onChangePresentReviews(FilterType.DISLIKES);
+        break;
+      case FilterType.REVIEWS:
+        this.activeDislikes.set(false);
+        this.activeReviews.set(true);
+        this.activeLikes.set(false);
+        this.onChangePresentReviews(FilterType.REVIEWS);
+        break;
+    }
+  }
+
+  onCancelFilter(event: MouseEvent, type: FilterType) {
+    event.stopPropagation();
+    switch (type) {
+      case FilterType.LIKES:
+        this.activeLikes.set(false);
+        this.onChangePresentReviews(FilterType.ALL);
+        break;
+      case FilterType.DISLIKES:
+        this.activeDislikes.set(false);
+        this.onChangePresentReviews(FilterType.ALL);
+        break;
+      case FilterType.REVIEWS:
+        this.activeReviews.set(false);
+        this.onChangePresentReviews(FilterType.ALL);
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,321 @@
+@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =
+avatarFile?.driver; @let companyUser = this.singleReview.companyUser; @let
+currentUser = this.singleReview.isItCurrentCompanyUser; @let comment =
+this.singleReview.comment; @let edited = this.singleReview.isEdited; @let
+activeLike = this.singleReview.thumb === 'like'; @let activeDislike =
+this.singleReview.thumb === 'dislike'; @let currentRating =
+this.singleReview.thumb;
+@let isTable = type === ReviewType.Table;
+@let isDetails = type === ReviewType.Details;
+@let isModal = type === ReviewType.Modal;
+<div
+  class="review-wrapper"
+  [class]="{
+    'not-editing': !editing(),
+    'table-type': isTable,
+    'modal-type': isModal,
+    'details-type': isDetails
+  }"
+  (click)="onExpandToggle()"
+>
+  @if(isModal){
+  <div class="upper">
+    <div class class="info">
+      <cai-avatar
+        [driver]="driver!"
+        [size]="avatarFile!.size"
+        [rounded]="avatarFile!.rounded"
+      ></cai-avatar>
+      <span class="name">{{ companyUser?.fullName }}</span>
+      @if(currentUser && !editing()){
+      <span class="personal">(You)</span>
+
+      } @if(!editing() && currentRating){
+      <span class="dot">•</span>
+
+      <svg-icon
+        [name]="currentRating === 'like' ? 'cai-like' : 'cai-dislike'"
+        [class.current-rating-like]="currentRating === 'like'"
+        [class.current-rating-dislike]="currentRating === 'dislike'"
+      ></svg-icon>
+      } @if(editing()){
+      <span class="description">{{
+        !edited ? "• Posting Publicly" : "• Edit Review"
+      }}</span>
+      } @if(!editing()){
+      <span class="edit-time">{{ newTime() }}</span>
+      @if(edited){
+      <span class="edited">• Edited</span>
+      } }
+    </div>
+
+    @if(editing()){
+    <div class="rating">
+      <div
+        class="svg-group"
+        [ngbTooltip]="activeLike ? 'Remove' : 'Like'"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-like"
+          class="like-icon"
+          (click)="onRate('like')"
+          [class.like-active]="activeLike"
+        ></svg-icon>
+      </div>
+
+      <div
+        class="svg-group"
+        [ngbTooltip]="activeDislike ? 'Remove' : 'Dislike'"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-dislike"
+          class="dislike-icon"
+          (click)="onRate('dislike')"
+          [class.dislike-active]="activeDislike"
+        >
+        </svg-icon>
+      </div>
+
+      <div class="separator"></div>
+      <div
+        class="svg-group"
+        ngbTooltip="Post Review"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-checkmark"
+          class="checkmark-icon"
+          (click)="onSaveChanges()"
+        ></svg-icon>
+      </div>
+
+      <div
+        class="svg-group"
+        ngbTooltip="Cancel"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-cancel"
+          class="cancel-icon"
+          (click)="onCancelReview()"
+        ></svg-icon>
+      </div>
+    </div>
+    }@else if(currentUser){
+    <div class="controls">
+      <div
+        class="svg-group"
+        ngbTooltip="Edit Review"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-edit"
+          (click)="onEdit()"
+          class="pencil-icon"
+        ></svg-icon>
+      </div>
+      <div
+        class="svg-group"
+        ngbTooltip="Delete Review"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        tooltipClass="tooltip tooltip-m-b-2"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-delete"
+          class="trash-icon"
+          (click)="onDelete()"
+        ></svg-icon>
+      </div>
+    </div>
+    }
+  </div>
+  @if(comment || currentContent() || editing()){
+  <div
+    class="lower"
+    [contentEditable]="editing() ? 'true' : 'false'"
+    data-placeholder="Share details of your own experience..."
+    (input)="onChangeContent($event)"
+    [innerHTML]="renderedContent()"
+    (keydown)="limitLength($event)"
+  ></div>
+  } }@else if(isTable || isDetails) {
+  <div class="upper">
+    <div class class="info">
+      <cai-avatar
+        [driver]="avatarFile!.driver"
+        [size]="avatarFile!.size"
+        [rounded]="avatarFile!.rounded"
+      ></cai-avatar>
+      <div class="column">
+        <div class="upper-row">
+          <span class="name">{{ companyUser?.fullName }}</span>
+          @if(currentUser && !editing()){
+          <span class="personal">(Me)</span>
+
+          } @if(!editing()){
+          <svg-icon
+            [name]="
+              currentRating === 'like'
+                ? 'cai-like'
+                : currentRating === 'dislike'
+                ? 'cai-dislike'
+                : ''
+            "
+            [class.current-rating-like]="currentRating === 'like'"
+            [class.current-rating-dislike]="currentRating === 'dislike'"
+          ></svg-icon>
+          }
+        </div>
+        <div class="lower-row">
+          @if(editing()){
+          <span class="description">{{
+            !edited ? "Posting Publicly" : "Edit Review"
+          }}</span>
+          } @if(!editing()){
+          <span class="edit-time">{{ newTime() }}</span>
+          @if(edited){
+          <span class="edited">• Edited</span>
+          } }
+        </div>
+      </div>
+    </div>
+
+    @if(editing()){
+    <div class="rating">
+      <div
+        class="svg-group"
+        [ngbTooltip]="activeLike && isDetails ? 'Remove' : activeLike && isTable ? 'Remove Like' : 'Like'"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-like"
+          class="like-icon"
+          (click)="onRate('like')"
+          [class.like-active]="currentRating === 'like'"
+        ></svg-icon>
+      </div>
+
+      <div
+        class="svg-group"
+        [ngbTooltip]="activeDislike && isDetails ? 'Remove' : activeDislike && isTable ? 'Remove Dislike' : 'Dislike'"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-dislike"
+          class="dislike-icon"
+          (click)="onRate('dislike')"
+          [class.dislike-active]="currentRating === 'dislike'"
+        >
+        </svg-icon>
+      </div>
+
+      <div class="separator-table"></div>
+      <div
+        class="svg-group"
+        ngbTooltip="Post Review"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-checkmark"
+          class="checkmark-icon"
+          (click)="onSaveChanges()"
+        ></svg-icon>
+      </div>
+
+      <div
+        class="svg-group"
+        ngbTooltip="Cancel"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-cancel"
+          class="cancel-icon"
+          (click)="onCancelReview()"
+        ></svg-icon>
+      </div>
+    </div>
+    }@else if(canExpand() && !expanded()){
+    <svg-icon name="cai-expand" class="expand-icon" />
+    }@else if(canExpand() && !currentUser && expanded()){
+    <svg-icon name="cai-expand" class="collapse-icon" />
+    } @else if(currentUser){
+    <div class="controls">
+      <div
+        class="svg-group"
+        ngbTooltip="Edit"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-edit"
+          (click)="onEdit()"
+          class="pencil-icon"
+        ></svg-icon>
+      </div>
+      <div
+        class="svg-group"
+        ngbTooltip="Delete Review"
+        triggers="mouseenter:mouseleave"
+        tabindex="0"
+        [tooltipClass]="isDetails ? 'tooltip tooltip-m-b-2' : 'tooltip tooltip-m-b-2 tooltip-inverse'"
+        placement="top"
+      >
+        <svg-icon
+          name="cai-delete"
+          class="trash-icon"
+          (click)="onDelete()"
+        ></svg-icon>
+      </div>
+    </div>
+    }
+  </div>
+  @if(comment || currentContent() || editing()){
+  <div
+    class="lower"
+    [contentEditable]="editing() ? 'true' : 'false'"
+    data-placeholder="Share details of your own experience..."
+    (input)="onChangeContent($event)"
+    [innerHTML]="renderedContent()"
+    (keydown)="limitLength($event)"
+  ></div>
+  }}
+</div>
+@if(isTable && currentUser && !editing()){
+<div class="bottom-divider-light"></div>
+}
+@if(currentUser && isDetails){
+<div class="bottom-divider-dark"></div>
+}