carriera-intern 0.0.0

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

@@ -0,0 +1,159 @@
+import { IReview } from './../../../models/review.model';
+import {
+  Component,
+  computed,
+  EventEmitter,
+  Input,
+  input,
+  Output,
+  signal,
+} from '@angular/core';
+import { SvgIconComponent } from 'angular-svg-icon';
+import { AvatarComponent } from '../../avatar/avatar.component';
+import {
+  NgbModule,
+  NgbTooltip,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { ReviewType } from '../enums/review-type.enum';
+import { DateFormatingPipe } from '../pipes/date-formating.pipe';
+
+@Component({
+  selector: 'cai-single-review',
+  imports: [
+    SvgIconComponent,
+    AvatarComponent,
+    NgbModule,
+    NgbTooltipModule,
+  ],
+  providers: [DateFormatingPipe],
+  templateUrl: './single-review.component.html',
+  styleUrl: './single-review.component.scss',
+})
+export class SingleReviewComponent {
+  constructor(private dateFormating: DateFormatingPipe) {}
+
+  //enum
+  public ReviewType = ReviewType;
+
+  //signals
+  newTime = signal<string>('');
+  currentContent = signal<string>('');
+  expanded = signal<boolean>(false);
+  canExpand = signal<boolean>(true);
+  editing = signal<boolean>(false);
+  edited = signal<boolean>(false);
+  confirmed: boolean = true;
+  canceled: boolean = false;
+
+  //inputs
+  @Input({ required: true }) type!: string;
+  @Input({ required: true }) singleReview!: IReview;
+
+  //outputs
+  @Output() deleteReview = new EventEmitter<number>();
+  @Output() onAddedReview = new EventEmitter<{
+    review: IReview;
+  }>();
+
+  @Output() onEditedReview = new EventEmitter<{
+    review: IReview;
+    edited: boolean;
+  }>();
+
+  ngOnInit(): void {
+    this.currentContent.set(this.singleReview.comment);
+    if (this.singleReview.createdAt && this.singleReview.updatedAt === '') {
+      const formatted = this.dateFormating.transform(
+        this.singleReview.createdAt
+      );
+
+      this.newTime.set(formatted || '');
+    }
+    if (this.singleReview.updatedAt) {
+      const formatted = this.dateFormating.transform(
+        this.singleReview.updatedAt
+      );
+      this.newTime.set(formatted || '');
+    }
+    if (this.singleReview.isItCurrentCompanyUser) {
+      if (!this.singleReview.comment && !this.singleReview.thumb) {
+        this.editing.set(true);
+      }
+    }
+    if (this.singleReview.comment.length > 50) {
+      this.canExpand.set(true);
+    } else {
+      this.canExpand.set(false);
+    }
+  }
+
+  onRate(prop: string): void {
+    this.singleReview.thumb = prop;
+  }
+
+  onEdit(): void {
+    this.editing.set(true);
+    this.edited.set(true);
+    this.singleReview.isEdited = true;
+  }
+
+  onSaveChanges(): void {
+    if (!this.singleReview.thumb && !this.singleReview.comment) return;
+    if (this.edited()) this.singleReview.isEdited = true;
+
+    const currentTime: Date = new Date();
+    const formattedTime = this.dateFormating.transform(currentTime);
+    this.newTime.set(formattedTime);
+
+    if (this.singleReview.isEdited) {
+      this.onEditedReview.emit({
+        review: this.singleReview,
+        edited: this.edited(),
+      });
+    } else {
+      this.onAddedReview.emit({
+        review: this.singleReview,
+      });
+    }
+    this.editing.set(false);
+  }
+
+  onChangeContent(event: Event): void {
+    event.preventDefault();
+    const divElement = event.target as HTMLDivElement;
+    const newValue = divElement.textContent || '';
+    this.singleReview.comment = newValue;
+  }
+
+  onDelete(): void {
+    this.deleteReview.emit(this.singleReview.reviewId);
+  }
+
+  onExpandToggle(): void {
+    this.expanded.set(!this.expanded());
+  }
+
+  renderedContent = computed(() => {
+    const value = this.singleReview.comment?.trim() || '';
+    if (this.editing()) return value;
+    if (this.expanded()) return value;
+    return value.length > 50 ? value.substring(0, 50) + '...' : value;
+  });
+
+  onCancelReview(): void {
+    this.deleteReview.emit();
+  }
+
+  limitLength(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const text = target.innerText || '';
+
+    if (
+      text.length > 140 &&
+      event.key !== 'Backspace' &&
+      event.key !== 'Delete'
+    )
+      event.preventDefault();
+  }
+}

package/projects/carriera-intern-components/src/app/components/selected-location-field/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './selected-business-field.interface';

package/projects/carriera-intern-components/src/app/components/selected-location-field/interfaces/selected-business-field.interface.ts

@@ -0,0 +1,11 @@
+export interface SelectedBusinessField {
+  label?: string;
+  id?: number;
+  name?: string;
+  address?: string;
+  phone?: string;
+  email?: string;
+  isFavorite?: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.html

@@ -0,0 +1,100 @@
+@let isDisabled = business().isDisabled; @let email = business().email;
+@let phone = business().phone; @let address = business().address;
+@let name = business().name; @let isFavorite = business().isFavorite;
+@let isRequired = business().isRequired; @let label = business().label;
+
+<div class="container" [class.disabled]="isDisabled">
+  <p class="label" [class.required]="isRequired">
+    {{ label }}
+  </p>
+  <div class="title-row">
+    <div class="d-flex align-items-center gap-1">
+      <p class="title">{{ name }}</p>
+
+      @if (isFavorite) {
+        <svg-icon [name]="'cai-favorite'" class="icon"></svg-icon>
+      }
+    </div>
+
+    @if (!isDisabled) {
+      <div class="d-flex align-items-center gap-1">
+        <button
+          (click)="handleAction(eGeneralActions.EDIT)"
+          [disabled]="isDisabled"
+          ngbTooltip="Edit"
+          [openDelay]="600"
+          tooltipClass="tooltip input-tooltip"
+          [placement]="'top'"
+          [container]="'body'"
+          [autoClose]="true"
+          [class]="'action-button'"
+        >
+          <svg-icon [name]="'cai-edit'" class="bg-icon"></svg-icon>
+        </button>
+        <button
+          (click)="handleAction(eGeneralActions.CLEAR)"
+          [disabled]="isDisabled"
+          ngbTooltip="Cancel"
+          [openDelay]="600"
+          tooltipClass="tooltip input-tooltip"
+          [placement]="'top'"
+          [container]="'body'"
+          [autoClose]="true"
+          [class]="'action-button'"
+        >
+          <svg-icon [name]="'cai-cancel'" class="bg-icon"></svg-icon>
+        </button>
+      </div>
+    }
+  </div>
+  @if (phone || email || address) {
+    <div class="details-row">
+      @let isDisabledColor = isDisabled ? null : "blue";
+      @if (phone) {
+        <div class="detail-container">
+          <cai-copy
+            [alignment]="eAlignment.LEFT"
+            [value]="phone"
+            [copyArea]="'full'"
+            [icon]="'cai-phone'"
+            [iconSize]="14"
+            [iconColor]="isDisabledColor"
+            [tooltipClass]="'tooltip-m-t-4'"
+          >
+            <p class="detail">{{ phone }}</p>
+          </cai-copy>
+        </div>
+      }
+      @if (email) {
+        <div class="detail-container">
+          <cai-copy
+            [alignment]="eAlignment.LEFT"
+            [value]="email"
+            [copyArea]="'full'"
+            [icon]="'cai-email'"
+            [iconSize]="14"
+            [iconColor]="isDisabledColor"
+            [tooltipClass]="'tooltip-m-t-4'"
+          >
+            <p class="detail">{{ email }}</p>
+          </cai-copy>
+        </div>
+      }
+      @if (address) {
+        <div class="detail-container">
+          <cai-copy
+            [alignment]="eAlignment.LEFT"
+            [value]="address"
+            [copyArea]="'full'"
+            [icon]="'cai-address'"
+            [iconSize]="14"
+            [iconColor]="isDisabledColor"
+            [tooltipClass]="'tooltip-m-t-4'"
+          >
+            <p class="detail">{{ address }}</p>
+          </cai-copy>
+        </div>
+      }
+    </div>
+  }
+</div>

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.scss

@@ -0,0 +1,239 @@
+@use "variables" as *;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+figure,
+pre {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Remove default list styles on ul, ol */
+ul,
+ol {
+  padding-left: 1.5rem;
+  list-style-position: outside;
+}
+
+/* Link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Remove outline for focus on mouse users, but keep it for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.label {
+  color: $color-black-300;
+  user-select: none;
+  pointer-events: none;
+
+  font-family: Montserrat;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+
+  &.required::after {
+    content: "* ";
+    color: $color-red-500;
+  }
+
+  position: absolute;
+  top: -16px;
+  left: 6px;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  padding: 4px 4px 6px 6px;
+  margin: 0;
+  border-radius: 2px;
+
+  background-color: $color-blue-50;
+
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover:not(.disabled) {
+    background-color: $color-blue-100;
+
+    .bg-icon {
+      opacity: 1;
+      color: $color-blue-100;
+    }
+  }
+
+  &:has(.action-button:focus-visible) {
+    .bg-icon {
+      opacity: 1 !important;
+    }
+  }
+
+  &.disabled {
+    background-color: $color-white-100;
+    .icon {
+      color: $color-black-100;
+    }
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .details-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 22px;
+    margin-top: 6px;
+  }
+}
+
+.title {
+  color: $color-black-300;
+  font-family: Montserrat;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  text-transform: uppercase;
+}
+
+.detail {
+  color: $color-black-500;
+  font-family: Montserrat;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+
+  user-select: none;
+}
+
+.icon {
+  height: 14px;
+  width: 14px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $color-blue-300;
+}
+
+.detail-container {
+  min-width: 0;
+  flex: 1;
+  max-width: max-content;
+}
+
+.bg-icon {
+  opacity: 0;
+  background-color: $color-blue-300;
+  color: $color-blue-50;
+  border-radius: 1px;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+
+  transition:
+    background-color 0.1s ease-in-out,
+    color 0.1s ease-in-out,
+    opacity 0.1s ease-in-out,
+    transform 0.1s ease-in-out;
+
+  transform-box: border-box;
+  transform-origin: center;
+  will-change: transform;
+
+  svg {
+    transition: transform 0.1s ease-in-out;
+  }
+
+  &:hover {
+    background-color: $color-blue-700;
+    transform: scale(calc(22 / 18));
+    svg {
+      transform: scale(calc(18 / 22));
+    }
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.action-button {
+  transition: outline 0.1s ease-in-out;
+
+  outline: 2px solid transparent;
+
+  border-radius: 1px;
+
+  &:focus-visible {
+    outline: 2px solid $color-black-300 !important;
+  }
+}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.ts

@@ -0,0 +1,28 @@
+import { Component, input, output } from '@angular/core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+
+// Interfaces
+import { SelectedBusinessField } from './interfaces';
+
+// Components
+import { CopyComponent } from '../copy/copy.component';
+import { eAlignment, eGeneralActions } from '../../enums';
+import { SvgIconComponent } from 'angular-svg-icon';
+
+@Component({
+  selector: 'cai-selected-business-field',
+  templateUrl: './selected-business-field.component.html',
+  styleUrl: './selected-business-field.component.scss',
+  imports: [NgbTooltip, CopyComponent, SvgIconComponent],
+})
+export class SelectedBusinessFieldComponent {
+  business = input<SelectedBusinessField>({});
+  onAction = output<eGeneralActions>();
+
+  public eGeneralActions = eGeneralActions;
+  public eAlignment = eAlignment;
+
+  public handleAction(action: eGeneralActions) {
+    this.onAction.emit(action);
+  }
+}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.stories.ts

@@ -0,0 +1,132 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { SelectedBusinessFieldComponent } from './selected-business-field.component';
+import { eGeneralActions } from '../../enums';
+const meta: Meta<SelectedBusinessFieldComponent> = {
+  title: 'Components/SelectedBusinessField',
+  component: SelectedBusinessFieldComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [SelectedBusinessFieldComponent],
+    }),
+  ],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<SelectedBusinessFieldComponent>;
+
+// --- Stories ---
+
+export const FuelStop: Story = {
+  args: {
+    business: {
+      label: 'Fuel Stop',
+      id: 2,
+      name: 'Hello, world!',
+      address: '123 Main St',
+      phone: '123-456-7890',
+      isFavorite: true,
+      isRequired: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onAction: ($event: eGeneralActions) => {
+        console.log('action', $event);
+      },
+    },
+    template: `
+    <div style="width: 456px;">
+      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
+      </cai-selected-business-field>
+    </div>
+    `,
+  }),
+};
+
+export const RepairShop: Story = {
+  args: {
+    business: {
+      label: 'Repair Shop',
+      id: 1,
+      name: 'Hello, world!',
+      address: '123 Main St',
+      phone: '123-456-7890',
+      email: 'hello@world.com',
+      isFavorite: false,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onAction: ($event: eGeneralActions) => {
+        console.log('action', $event);
+      },
+    },
+    template: `
+    <div style="width: 456px;">
+      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
+      </cai-selected-business-field>
+    </div>
+    `,
+  }),
+};
+
+export const FuelStopDisabled: Story = {
+  args: {
+    business: {
+      label: 'Fuel Stop',
+      id: 3,
+      name: 'Hello, world!',
+      address:
+        '123 Main Long Street, Suite 400, Springfield, IL 62704, United States',
+      phone: '123-456-7890',
+      isFavorite: true,
+      isRequired: true,
+      isDisabled: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onAction: ($event: eGeneralActions) => {
+        console.log('action', $event);
+      },
+    },
+    template: `
+    <div style="width: 456px;">
+      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
+      </cai-selected-business-field>
+    </div>
+    `,
+  }),
+};
+
+export const Empty: Story = {
+  args: {
+    business: {
+      label: 'Fuel Stop',
+      id: 2,
+      name: 'Hello, world!',
+
+      isFavorite: true,
+      isRequired: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onAction: ($event: eGeneralActions) => {
+        console.log('action', $event);
+      },
+    },
+    template: `
+    <div style="width: 456px;">
+      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
+      </cai-selected-business-field>
+    </div>
+    `,
+  }),
+};