carriera-intern 0.0.0

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

@@ -0,0 +1,451 @@
+import { RatingReviewComponent } from './rating-review.component';
+import { ReviewModalComponent } from '../../review-modal/review-modal.component';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { SingleReviewComponent } from '../../single-review/single-review.component';
+import { SvgIconComponent } from 'angular-svg-icon';
+import { ReviewType } from '../../enums/review-type.enum';
+
+const meta: Meta<RatingReviewComponent> = {
+  title: 'Components/RatingReview',
+  component: RatingReviewComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [ReviewModalComponent, SingleReviewComponent, SvgIconComponent],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<RatingReviewComponent>;
+
+export const TableReview: Story = {
+  args: {
+    ratingReviews: [
+      {
+        ratingId: 1,
+        thumb: 'dislike',
+        reviewId: 1,
+        comment:
+          'This is my personal review about the great experience. Dummy text for test.',
+        isEdited: true,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-06-03T09:18:00',
+        updatedAt: '2025-06-03T09:35:00',
+        companyUser: {
+          id: 1,
+          userId: 0,
+          fullName: 'Jovan Kostić',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Jovan',
+              lastName: 'Kostić',
+              avatarFile: undefined,
+              avatarColor: 'Blue',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 1,
+        },
+      },
+
+      {
+        ratingId: 2,
+        thumb: 'like',
+        reviewId: 2,
+        comment: '',
+        isEdited: true,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-10-13T11:18:00',
+        updatedAt: '',
+        companyUser: {
+          id: 2,
+          userId: 1,
+          fullName: 'Luka Dimić',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Luka',
+              lastName: 'Dimić',
+              avatarFile: undefined,
+              avatarColor: 'Red',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 3,
+        thumb: 'dislike',
+        reviewId: 3,
+        comment:
+          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ',
+        isEdited: false,
+        companyUserId: 3,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-08-25T16:18:00',
+        updatedAt: '',
+        companyUser: {
+          id: 2,
+          userId: 2,
+          fullName: 'James Garcia',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'James',
+              lastName: 'Garcia',
+              avatarFile: undefined,
+              avatarColor: 'Yellow',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 4,
+        thumb: 'dislike',
+        reviewId: 4,
+        comment: 'This is my Experience.',
+        isEdited: false,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-07-11T10:35:00',
+        updatedAt: '',
+        companyUser: {
+          id: 1,
+          userId: 0,
+          fullName: 'James Bond',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Jovan',
+              lastName: 'Bond',
+              avatarFile: undefined,
+              avatarColor: 'Green',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 4,
+        },
+      },
+    ],
+    modaltype: ReviewType.Table,
+    inCard: true
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-rating-review [inCard]="inCard" [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};
+export const TableReviewEmpty: Story = {
+  args: {
+    ratingReviews: [],
+    modaltype: ReviewType.Table,
+    inCard: false
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-rating-review [inCard]="inCard"  [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};
+
+export const DetailsReview: Story = {
+  args: {
+    ratingReviews: [
+      {
+        ratingId: 1,
+        thumb: 'dislike',
+        reviewId: 1,
+        comment:
+          'This is my personal review about the great experience. Dummy text for test.',
+        isEdited: true,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-10-07T09:18:00',
+        updatedAt: '2025-10-07T09:18:00',
+        companyUser: {
+          id: 1,
+          userId: 0,
+          fullName: 'Jovan Kostić',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Jovan',
+              lastName: 'Kostić',
+              avatarFile: undefined,
+              avatarColor: 'Blue',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 1,
+        },
+      },
+
+      {
+        ratingId: 2,
+        thumb: 'like',
+        reviewId: 2,
+        comment: '',
+        isEdited: true,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-08-14T10:45:00',
+        updatedAt: '2025-08-14T10:45:00',
+        companyUser: {
+          id: 2,
+          userId: 1,
+          fullName: 'Luka Dimić',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Luka',
+              lastName: 'Dimić',
+              avatarFile: undefined,
+              avatarColor: 'Red',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 3,
+        thumb: 'dislike',
+        reviewId: 3,
+        comment:
+          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ',
+        isEdited: false,
+        companyUserId: 3,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-06-02T18:30:00',
+        updatedAt: '',
+        companyUser: {
+          id: 2,
+          userId: 2,
+          fullName: 'James Garcia',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'James',
+              lastName: 'Garcia',
+              avatarFile: undefined,
+              avatarColor: 'Yellow',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 4,
+        thumb: 'dislike',
+        reviewId: 4,
+        comment: 'This is my Experience.',
+        isEdited: false,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-03-25T08:15:00',
+        updatedAt: '2025-03-25T08:26:00',
+        companyUser: {
+          id: 1,
+          userId: 0,
+          fullName: 'James Bond',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Jovan',
+              lastName: 'Bond',
+              avatarFile: undefined,
+              avatarColor: 'Green',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 4,
+        },
+      },
+    ],
+    modaltype: ReviewType.Details,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-review-modal [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};
+export const DetailsReviewEmpty: Story = {
+  args: {
+    ratingReviews: [],
+    modaltype: ReviewType.Details,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-review-modal [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};
+
+export const ModalReview: Story = {
+  args: {
+    ratingReviews: [       
+      {
+        ratingId: 2,
+        thumb: 'dislike',
+        reviewId: 2,
+        comment: '',
+        isEdited: true,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '2025-03-25T08:15:00',
+        updatedAt: '2025-03-25T08:15:00',
+        companyUser: {
+          id: 2,
+          userId: 1,
+          fullName: 'Luka Dimić',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Luka',
+              lastName: 'Dimić',
+              avatarFile: undefined,
+              avatarColor: 'Red',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 3,
+        thumb: 'dislike',
+        reviewId: 3,
+        comment:
+          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ',
+        isEdited: false,
+        companyUserId: 3,
+        isItCurrentCompanyUser: false,
+        createdAt: '01-01-2025',
+        updatedAt: '01-01-2025',
+        companyUser: {
+          id: 2,
+          userId: 2,
+          fullName: 'Jovan Kostic',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'Jovan',
+              lastName: 'Kostic',
+              avatarFile: undefined,
+              avatarColor: 'Yellow',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 2,
+        },
+      },
+      {
+        ratingId: 4,
+        thumb: 'dislike',
+        reviewId: 4,
+        comment: 'This is my Experience.',
+        isEdited: false,
+        companyUserId: 1,
+        isItCurrentCompanyUser: false,
+        createdAt: '01-01-2025',
+        updatedAt: '01-01-2025',
+        companyUser: {
+          id: 1,
+          userId: 0,
+          fullName: 'James Bond',
+          avatarFile: {
+            driver: {
+              id: 0,
+              firstName: 'James',
+              lastName: 'Bond',
+              avatarFile: undefined,
+              avatarColor: 'Green',
+            },
+            size: 22,
+            rounded: true,
+            inverse: false,
+          },
+          departmentId: 4,
+        },
+      },
+    ],
+    modaltype: ReviewType.Modal,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-review-modal [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};
+export const ModalReviewEmpty: Story = {
+  args: {
+    ratingReviews: [],
+    modaltype: ReviewType.Modal,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div>
+        <cai-review-modal  [modaltype]="modaltype" [ratingReviews]="ratingReviews"/>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,236 @@
+@let reviewsLength = presentReviews.length;
+@let isTable = modaltype === ReviewType.Table;
+@let isModal = modaltype === ReviewType.Modal;
+@let isDetails = modaltype === ReviewType.Details;
+
+<div
+  [class]="{
+    'modal-wrapper': isModal,
+    'table-wrapper': isTable,
+    'details-wrapper': isDetails,
+  }"
+>
+  <div class="main-window">
+    <!-- FILTER BOX -->
+    <div class="box">
+      <div class="filter">
+        <div class="column">
+          <div class="rating_review">
+            @if(!isDetails){
+            <div class="left-side">
+              <p class="count-heading">Rating & Review</p>
+              <div class="circle">
+                {{ countReviews }}
+              </div>
+              @if(isModal && reviewsLength > 0){
+              <div class="y-divider"></div>
+              }
+            </div>
+            } @if(!isTable){
+            <div class="counter">
+              <div
+                (click)="onSelectFilter(FilterType.LIKES)"
+                [class]="{
+                  'filter-group': true,
+                  'active-group': activeLikes(),
+                  'non-active-group': !activeLikes(),
+                  'empty-state': countLikes === 0
+                }"
+                [ngbTooltip]="activeLikes() ? 'Remove Filter' : 'Filter Likes'"
+                triggers="mouseenter:mouseleave"
+                tabindex="0"
+                tooltipClass="tooltip tooltip-m-b-2"
+                placement="bottom"
+              >
+                <svg-icon
+                  name="cai-like"
+                  class="like-icon"
+                  [class.active]="activeLikes()"
+                  [class.most-likes]="onReturnMost() === FilterType.LIKES"
+                ></svg-icon>
+                <svg-icon
+                  name="cai-cancel"
+                  class="cancel-icon"
+                  (click)="onCancelFilter($event, FilterType.LIKES)"
+                ></svg-icon>
+                <span class="count">{{ countLikes }}</span>
+              </div>
+              <div
+                (click)="onSelectFilter(FilterType.DISLIKES)"
+                [class]="{
+                  'filter-group': true,
+                  'active-group': activeDislikes(),
+                  'non-active-group': !activeDislikes(),
+                  'empty-state': countDislikes === 0
+                }"
+                [ngbTooltip]="
+                  activeDislikes() ? 'Remove Filter' : 'Filter Dislikes'
+                "
+                triggers="mouseenter:mouseleave"
+                tabindex="0"
+                tooltipClass="tooltip tooltip-m-b-2"
+                placement="bottom"
+              >
+                <svg-icon
+                  name="cai-dislike"
+                  [class.active]="activeDislikes()"
+                  [class.most-dislikes]="onReturnMost() === FilterType.DISLIKES"
+                  class="dislike-icon"
+                ></svg-icon>
+                <svg-icon
+                  name="cai-cancel"
+                  class="cancel-icon"
+                  (click)="onCancelFilter($event, FilterType.DISLIKES)"
+                ></svg-icon>
+                <span class="count">{{ countDislikes }}</span>
+              </div>
+              <div
+                (click)="onSelectFilter(FilterType.REVIEWS)"
+                [class]="{
+                  'filter-group': true,
+                  'active-group': activeReviews(),
+                  'non-active-group': !activeReviews(),
+                  'empty-state': countReviews === 0
+                }"
+                [ngbTooltip]="
+                  activeReviews() ? 'Remove Filter' : 'Filter Reviews'
+                "
+                triggers="mouseenter:mouseleave"
+                tabindex="0"
+                tooltipClass="tooltip tooltip-m-b-2"
+                placement="bottom"
+              >
+                <svg-icon
+                  name="cai-edit2"
+                  [class.active]="activeReviews()"
+                  class="pencil-icon"
+                ></svg-icon>
+
+                <svg-icon
+                  name="cai-cancel"
+                  class="cancel-icon"
+                  (click)="onCancelFilter($event, FilterType.REVIEWS)"
+                ></svg-icon>
+
+                <span class="count">{{ countReviews }}</span>
+              </div>
+            </div>
+            }
+          </div>
+          @if(ratingReviews && reviewsLength > 0){
+          <div class="date-group">
+            <span>Date</span>
+            <svg-icon name="cai-sort-descending"></svg-icon>
+          </div>
+
+          } @if(isModal || isDetails){
+          <div
+            class="filter-group"
+            [ngStyle]="{
+              display: addingReview() && reviewsLength === 0 ? 'none' : 'flex'
+            }"
+            ngbTooltip="Add New"
+            triggers="mouseenter:mouseleave"
+            tabindex="0"
+            tooltipClass="tooltip tooltip-m-b-2"
+            placement="bottom"
+          >
+            <svg-icon
+              name="cai-plus"
+              class="plus-icon"
+              (click)="onAddReview()"
+              [class.disabled]="disabled()"
+            ></svg-icon>
+          </div>
+          }
+        </div>
+        @if(isDetails){
+        <div class="bottom-divider-light"></div>
+        }
+      </div>
+      @if(isTable && reviewsLength <= 1){
+      <div class="x-divider"></div>
+      } @if(isTable && reviewsLength > 0){
+      <div class="input-container">
+        <cai-input
+          id="search"
+          formControlName="search"
+          [config]="{
+          type: 'text',
+          icon: 'cai-search',
+          inverse: true,
+          size: 22,
+          name: titleInput,
+          placeholderBehavior: 'fade',
+          placeholderColor: '#AAAAAA',
+        }"
+          (onValueChange)="handleSearch($event)"
+          (onClear)="handleClear($event)"
+        ></cai-input>
+      </div>
+      <div class="btn-filters">
+        <div
+          [class.active]="currentActiveFilter === FilterType.ALL"
+          (click)="onChangePresentReviews(FilterType.ALL)"
+        >
+          ALL
+        </div>
+        <div
+          [class.active]="currentActiveFilter === FilterType.RATING"
+          (click)="onChangePresentReviews(FilterType.RATING)"
+        >
+          RATING
+        </div>
+        <div
+          [class.active]="currentActiveFilter === FilterType.REVIEWS"
+          (click)="onChangePresentReviews(FilterType.REVIEWS)"
+        >
+          REVIEW
+        </div>
+      </div>
+      }
+    </div>
+
+    <!-- MAIN MODAL -->
+    <div class="reviews-window">
+      @if(isTable && !hasPersonalReview){
+      <div class="add-review" (click)="onAddReview()">
+        <span>ADD REVIEW</span>
+        <div class="filter-group">
+          <svg-icon
+            name="cai-plus"
+            class="plus-icon"
+            [class.disabled]="disabled()"
+          ></svg-icon>
+        </div>
+      </div>
+      } @if(ratingReviews && reviewsLength == 0 && !addingReview()){
+      <div class="ilustration">
+        <svg-icon
+          [name]="
+            !isTable
+              ? 'cai-illustration'
+              : 'cai-illustration-dark'
+          "
+        ></svg-icon>
+      </div>
+      }@else { @if (addingReview()) {
+      <cai-single-review
+        [type]="modaltype"
+        [singleReview]="testReview"
+        (deleteReview)="onDeleteReview($event)"
+        (onEditedReview)="onEditedReview($event)"
+        (onAddedReview)="onGetReview($event)"
+      />
+      } @for(review of presentReviews; track review.ratingId){
+      <cai-single-review
+        [type]="modaltype"
+        [singleReview]="review"
+        (deleteReview)="onDeleteReview($event)"
+        (onEditedReview)="onEditedReview($event)"
+        (onAddedReview)="onGetReview($event)"
+      />
+      } }
+    </div>
+  </div>
+</div>