Added checkbox for "Use address as primary"

Refactored map component to display multiple maps on the same page Migrated create-workshop-address component from flexLayout to tailwind
ita-social-projects · Jan 9, 2025 · e16eb57 · e16eb57
1 parent eca69a7
commit e16eb57
Show file tree

Hide file tree

Showing 18 changed files with 320 additions and 129 deletions.
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -139,6 +139,13 @@
   background: none !important;
   color: white !important;
   font-size: 0.7rem !important;
+
+  .mat-icon {
+    margin: 0;
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
 }
 
 .menu .mat-icon {

diff --git a/src/app/shared/components/map/map.component.html b/src/app/shared/components/map/map.component.html
@@ -1,4 +1,4 @@
-<div id="map">
+<div id="map-{{ mapId }}" class="map">
   <button title="{{ 'GEOLOCATION_BUTTON_TITLE' | translate }}" class="geolocation-button" (click)="setCurrentGeolocation()">
     <mat-icon>gps_fixed</mat-icon>
   </button>

diff --git a/src/app/shared/components/map/map.component.scss b/src/app/shared/components/map/map.component.scss
@@ -1,4 +1,4 @@
-#map {
+.map {
   height: 100%;
   width: 100%;
 }

diff --git a/src/app/shared/components/map/map.component.ts b/src/app/shared/components/map/map.component.ts
@@ -30,6 +30,7 @@ import { SharedUserState } from 'shared/store/shared-user.state';
 export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() public addressFormGroup: FormGroup;
   @Input() public settelmentFormGroup: FormGroup;
+  @Input() public mapId: string; // Add this Input
 
   @Input() public filteredWorkshops$: Observable<SearchResponse<WorkshopCard[]>>;
 
@@ -176,7 +177,26 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
    * method init start position on map
    */
   private initMap(): void {
-    this.map = Layer.map('map').setView(this.defaultCoords, this.zoom);
+    // this.map = Layer.map('map').setView(this.defaultCoords, this.zoom);
+
+    // Layer.tileLayer('https://tms{s}.visicom.ua/2.0.0/ua/base/{z}/{x}/{y}.png', {
+    //   updateWhenZooming: true,
+    //   subdomains: '123',
+    //   maxZoom: 19,
+    //   tms: true,
+    //   // eslint-disable-next-line @typescript-eslint/quotes
+    //   attribution: "Дані карт © 2019 ПРаТ «<a href='https://api.visicom.ua/'>Визиком</a>»"
+    // }).addTo(this.map);
+
+    // this.map.on('click', (L: Layer.LeafletMouseEvent) => {
+    //   if (this.workshops) {
+    //     this.unselectMarkers();
+    //     this.selectedWorkshopAddress.emit(null);
+    //   } else {
+    //     this.setMapLocation(L.latlng);
+    //   }
+    // });
+    this.map = Layer.map('map-' + this.mapId).setView(this.defaultCoords, this.zoom);
 
     Layer.tileLayer('https://tms{s}.visicom.ua/2.0.0/ua/base/{z}/{x}/{y}.png', {
       updateWhenZooming: true,
@@ -237,14 +257,15 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private setAddress(): void {
-    const address: Geocoder & { latitude: number; longitude: number } = this.addressFormGroup.getRawValue();
+    const address: Geocoder & { latitude: number; longitude: number } = this.addressFormGroup.get('address').getRawValue();
 
     if (address.catottgId) {
       this.setNewSingleMarker([address.latitude, address.longitude]);
     }
 
-    this.addressFormGroup.valueChanges
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
+    this.addressFormGroup
+      .get('address')
+      .valueChanges.pipe(debounceTime(500), takeUntil(this.destroy$))
       .subscribe((value: Geocoder & { latitude: number; longitude: number }) => {
         if (this.addressFormGroup.valid) {
           this.addressDecode(value);
@@ -272,6 +293,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private addressDecode(address: Geocoder): void {
+    console.log(address);
     this.geocoderService
       .addressDecode(address)
       .pipe(take(1))

diff --git a/src/app/shared/models/workshop.model.ts b/src/app/shared/models/workshop.model.ts
@@ -12,11 +12,11 @@ export abstract class WorkshopBase {
   id?: string;
   title: string;
   shortTitle: string;
-  phone: string;
-  email: string;
-  website?: string;
-  facebook?: string;
-  instagram?: string;
+  // phone: string;
+  // email: string;
+  // website?: string;
+  // facebook?: string;
+  // instagram?: string;
   minAge: number;
   maxAge: number;
   dateTimeRanges: DateTimeRanges[];
@@ -35,8 +35,9 @@ export abstract class WorkshopBase {
   institutionHierarchy: string;
   directionIds: number[];
   keywords: string[];
-  addressId: number;
-  address: Address;
+  // addressId: number;
+  // address: Address;
+  workshopContacts: WorkshopContacts[];
   teachers: Teacher[];
   providerId: string;
   providerTitle: string;
@@ -55,11 +56,18 @@ export abstract class WorkshopBase {
   coverage: string;
   workshopType: string;
 
-  constructor(about: WorkshopAbout, description: Description, address: Address, teachers: Teacher[], provider: Provider, id?: string) {
+  constructor(
+    about: WorkshopAbout,
+    description: Description,
+    /* address: Address*/ workshopContacts: WorkshopContacts[],
+    teachers: Teacher[],
+    provider: Provider,
+    id?: string
+  ) {
     this.title = about.title;
     this.shortTitle = about.shortTitle;
-    this.phone = about.phone;
-    this.email = about.email;
+    // this.phone = about.phone;
+    // this.email = about.email;
     this.minAge = about.minAge;
     this.maxAge = about.maxAge;
     this.dateTimeRanges = about.workingHours;
@@ -74,8 +82,8 @@ export abstract class WorkshopBase {
     this.institutionId = about.institutionId;
     this.institutionHierarchyId = about.institutionHierarchyId;
     this.keywords = description.keyWords;
-    this.addressId = address.id;
-    this.address = address;
+    // this.addressId = address.id;
+    // this.address = address;
     this.teachers = teachers;
     this.providerId = provider.id;
     this.providerTitle = provider.fullTitle;
@@ -92,19 +100,20 @@ export abstract class WorkshopBase {
     this.ageComposition = description.ageComposition;
     this.coverage = description.coverage;
     this.workshopType = description.workshopType;
+    this.workshopContacts = workshopContacts;
 
     if (id) {
       this.id = id;
     }
-    if (about.facebook) {
-      this.facebook = about.facebook;
-    }
-    if (about.website) {
-      this.website = about.website;
-    }
-    if (about.instagram) {
-      this.instagram = about.instagram;
-    }
+    // if (about.facebook) {
+    //   this.facebook = about.facebook;
+    // }
+    // if (about.website) {
+    //   this.website = about.website;
+    // }
+    // if (about.instagram) {
+    //   this.instagram = about.instagram;
+    // }
     if (description.disabilityOptionsDesc) {
       this.disabilityOptionsDesc = description.disabilityOptionsDesc;
     }
@@ -124,8 +133,15 @@ export class Workshop extends WorkshopBase {
   imageIds?: string[];
   imageFiles?: File[];
 
-  constructor(about: WorkshopAbout, description: Description, address: Address, teachers: Teacher[], provider: Provider, id?: string) {
-    super(about, description, address, teachers, provider, id);
+  constructor(
+    about: WorkshopAbout,
+    description: Description,
+    /* address: Address*/ workshopContacts: WorkshopContacts[],
+    teachers: Teacher[],
+    provider: Provider,
+    id?: string
+  ) {
+    super(about, description, workshopContacts, teachers, provider, id);
 
     if (about.coverImageId) {
       this.coverImageId = about.coverImageId[0];
@@ -221,15 +237,15 @@ export interface WorkshopCardParameters extends PaginationParameters {
 export interface WorkshopAbout {
   title: string;
   shortTitle: string;
-  phone: string;
-  email: string;
+  // phone: string;
+  // email: string;
   minAge: number;
   maxAge: number;
   workingHours: DateTimeRanges[];
   price: number;
-  website?: string;
-  facebook?: string;
-  instagram?: string;
+  // website?: string;
+  // facebook?: string;
+  // instagram?: string;
   payRate: PayRateType;
   formOfLearning: FormOfLearning;
   availableSeats: number;
@@ -261,3 +277,35 @@ interface Description {
   coverage: string;
   workshopType: string;
 }
+
+export class WorkshopContacts {
+  addressTitle: string;
+  website?: string;
+  facebook?: string;
+  instagram?: string;
+  address: Address;
+  contacts: Contacts[];
+  isPrimary: boolean;
+
+  constructor(info: WorkshopContacts) {
+    this.addressTitle = info.addressTitle;
+    this.address = info.address;
+    this.contacts = info.contacts;
+    this.isPrimary = info.isPrimary;
+    if (info.website) {
+      this.website = info.website;
+    }
+    if (info.facebook) {
+      this.facebook = info.facebook;
+    }
+    if (info.instagram) {
+      this.instagram = info.instagram;
+    }
+  }
+}
+
+interface Contacts {
+  owner: string;
+  phones: string[];
+  emails: string[];
+}
diff --git a/src/app/shell/details/side-menu/side-menu.component.ts b/src/app/shell/details/side-menu/side-menu.component.ts
@@ -34,12 +34,17 @@ export class SideMenuComponent implements OnInit {
 
   private getContactsData(): void {
     this.contactsData = {
-      phone: this.workshop?.phone || this.provider.phoneNumber,
-      email: this.workshop?.email || this.provider.email,
-      facebook: this.workshop?.facebook || this.provider.facebook,
-      instagram: this.workshop?.instagram || this.provider.instagram,
-      website: this.workshop?.website || this.provider.website
+      phone: this.workshop?.workshopContacts[0].contacts[0].phones[0] || this.provider.phoneNumber,
+      email: this.workshop?.workshopContacts[0].contacts[0].emails[0] || this.provider.email,
+      facebook: this.workshop?.workshopContacts[0].facebook || this.provider.facebook,
+      instagram: this.workshop?.workshopContacts[0].instagram || this.provider.instagram,
+      website: this.workshop?.workshopContacts[0].website || this.provider.website
+      // phone: this.workshop?.phone || this.provider.phoneNumber,
+      // email: this.workshop?.email || this.provider.email,
+      // facebook: this.workshop?.facebook || this.provider.facebook,
+      // instagram: this.workshop?.instagram || this.provider.instagram,
+      // website: this.workshop?.website || this.provider.website
     };
-    this.address = { ...(this.workshop?.address || this.provider?.actualAddress || this.provider.legalAddress) };
+    this.address = { ...(this.workshop?.workshopContacts[0].address || this.provider?.actualAddress || this.provider.legalAddress) };
   }
 }
diff --git a/...pp/shell/personal-cabinet/provider/create-address-form/create-address-form.component.scss b/...pp/shell/personal-cabinet/provider/create-address-form/create-address-form.component.scss
@@ -32,6 +32,13 @@ h4 {
   border-radius: 21px;
   line-height: initial;
   box-sizing: border-box;
+
+  margin-bottom: 10px;
+}
+
+.step-input {
+  margin-top: 5px;
+  margin-bottom: 10px;
 }
 
 .redBorder {

diff --git a/...sonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html b/...sonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="AboutFormGroup" class="step flex flex-col justify-between items-stretch">
-  <mat-checkbox class="step-label" color="primary" [formControl]="useProviderInfoCtrl">
+  <!-- <mat-checkbox class="step-label" color="primary" [formControl]="useProviderInfoCtrl">
     {{ 'FORMS.CONTROL_VALUES.USE_SERVICE_PROVIDER_CONTACT_DETAILS' | translate }}
-  </mat-checkbox>
+  </mat-checkbox> -->
 
   <app-image-form-control
     *ngIf="isImagesFeature"
@@ -32,7 +32,7 @@
     [maxCharacters]="validationConstants.INPUT_LENGTH_60">
   </app-validation-hint>
 
-  <label class="step-label">{{ 'FORMS.LABELS.PHONE' | translate }}<span class="step-required">*</span></label>
+  <!-- <label class="step-label">{{ 'FORMS.LABELS.PHONE' | translate }}<span class="step-required">*</span></label>
   <app-phone-form-control [parentFormControl]="AboutFormGroup.get('phone')"> </app-phone-form-control>
   <app-validation-hint
     [validationFormControl]="AboutFormGroup.get('phone')"
@@ -74,7 +74,7 @@
     [validationFormControl]="AboutFormGroup.get('instagram')"
     [minCharacters]="validationConstants.INPUT_LENGTH_1"
     [maxCharacters]="validationConstants.INPUT_LENGTH_256">
-  </app-validation-hint>
+  </app-validation-hint> -->
 
   <div class="border-bottom"></div>
 

diff --git a/...ersonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts b/...ersonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts
@@ -165,14 +165,14 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy {
         Validators.pattern(MUST_CONTAIN_LETTERS),
         Validators.minLength(ValidationConstants.INPUT_LENGTH_1)
       ]),
-      phone: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]),
-      email: new FormControl('', [Validators.required, FormValidators.email]),
+      // phone: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]),
+      // email: new FormControl('', [Validators.required, FormValidators.email]),
       minAge: new FormControl(null, [Validators.required]),
       maxAge: new FormControl(null, [Validators.required]),
       image: new FormControl(''),
-      website: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
-      facebook: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
-      instagram: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
+      // website: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
+      // facebook: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
+      // instagram: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
       institutionHierarchyId: new FormControl('', Validators.required),
       institutionId: new FormControl('', Validators.required),
       price: new FormControl({ value: 0, disabled: true }, [Validators.required]),