Merge branch 'dev' into bugfix-feature/#6363/user-can-edit-past-dates

ita-social-projects · Sep 18, 2023 · 873a262 · 873a262
2 parents 12995cb + 813e439
commit 873a262
Show file tree

Hide file tree

Showing 25 changed files with 363 additions and 132 deletions.
diff --git a/src/app/main/component/events/components/create-edit-events/create-edit-events.component.ts b/src/app/main/component/events/components/create-edit-events/create-edit-events.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Injector, Input } from '@angular/core';
+import { Component, OnInit, Injector, Input, ChangeDetectionStrategy } from '@angular/core';
 import { quillConfig } from './quillEditorFunc';
 import Quill from 'quill';
 import 'quill-emoji/dist/quill-emoji.js';
@@ -36,7 +36,8 @@ import { FormBaseComponent } from '@shared/components/form-base/form-base.compon
 @Component({
   selector: 'app-create-edit-events',
   templateUrl: './create-edit-events.component.html',
-  styleUrls: ['./create-edit-events.component.scss']
+  styleUrls: ['./create-edit-events.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CreateEditEventsComponent extends FormBaseComponent implements OnInit {
   public title = '';
@@ -208,7 +209,7 @@ export class CreateEditEventsComponent extends FormBaseComponent implements OnIn
       this.dates[ind].coordinatesDto = form.coordinatesDto;
     } else {
       this.duplindx = ind;
-      this.dates.splice(ind, 1, { ...DateObj });
+      this.dates[ind].date = null;
       this.editDates = true;
     }
   }

diff --git a/.../component/events/components/event-date-time-picker/event-date-time-picker.component.html b/.../component/events/components/event-date-time-picker/event-date-time-picker.component.html
@@ -29,7 +29,7 @@ <h5 class="time-item">--</h5>
       'create-event.all-day' | translate
     }}</mat-checkbox>
   </div>
-  <div *ngIf="index === this.duplindx" class="duplix-error">{{ 'create-event.duplicate-event-date' | translate }}</div>
+  <div *ngIf="index === this.duplindex" class="duplix-error">{{ 'create-event.duplicate-event-date' | translate }}</div>
   <div class="checkbox">
     <mat-checkbox class="example-margin" [checked]="checkOfflinePlace" [disabled]="isPlaceDisabled" (change)="checkIfOffline()">{{
       'create-event.event-place' | translate

diff --git a/...in/component/events/components/event-date-time-picker/event-date-time-picker.component.ts b/...in/component/events/components/event-date-time-picker/event-date-time-picker.component.ts
@@ -45,6 +45,7 @@ export class EventDateTimePickerComponent implements OnInit, OnChanges, OnDestro
     types: ['address'],
     componentRestrictions: { country: 'UA' }
   };
+  public duplindex: number;
 
   @Input() check: boolean;
   @Input() editDate: DateEventResponceDto;
@@ -102,6 +103,9 @@ export class EventDateTimePickerComponent implements OnInit, OnChanges, OnDestro
       this.updateTimeArrays(value.startTime, value.endTime);
       this.status.emit(this.dateForm.valid);
       this.datesForm.emit(this.dateForm.getRawValue());
+      if (this.dateForm.get('date').value) {
+        this.duplindex = -1;
+      }
     });
     if (this.editDate && !this.editDates) {
       this.setDataEditing();
@@ -120,9 +124,7 @@ export class EventDateTimePickerComponent implements OnInit, OnChanges, OnDestro
         });
       }
     });
-    if (this.isDateDuplicate) {
-      this.dateForm.get('date').markAsTouched();
-    }
+
     const isAddressFilledSubscription = this.eventsService.getCheckedPlacesObservable().subscribe((values) => {
       this.arePlacesFilled = values;
     });
@@ -239,6 +241,11 @@ export class EventDateTimePickerComponent implements OnInit, OnChanges, OnDestro
     if (this.check) {
       this.dateForm.markAllAsTouched();
     }
+    if (this.isDateDuplicate && this.index === this.duplindx) {
+      this.duplindex = this.duplindx;
+      this.dateForm.patchValue({ date: null });
+      this.dateForm.get('date').markAsTouched();
+    }
   }
 
   private setCurrentLocation(): void {

diff --git a/src/app/main/component/events/components/events-list/events-list.component.html b/src/app/main/component/events/components/events-list/events-list.component.html
@@ -25,14 +25,14 @@
         <div class="dropdown" (click)="timeFilter.open()">
           <mat-label class="filter">{{ 'homepage.events.time' | translate }}</mat-label>
           <mat-select #timeFilter [formControl]="timeFilterControl" multiple>
-            <mat-option [value]="0" (click)="toggleAllSelection(timeList, 'timeList')">
+            <mat-option [value]="0" (click)="toggleAllSelection(timeList, 'eventTime')">
               {{ 'homepage.events.time-any-time' | translate }}
             </mat-option>
             <mat-divider></mat-divider>
             <mat-option
               [value]="eventTime"
               *ngFor="let eventTime of eventTimeList"
-              (onSelectionChange)="updateSelectedFilters(eventTime, $event)"
+              (onSelectionChange)="updateSelectedFilters(eventTime, $event, timeList, 'eventTime', eventTimeList)"
             >
               {{ getLangValue(eventTime.nameUa, eventTime.nameEn) }}
             </mat-option>
@@ -41,14 +41,14 @@
         <div class="dropdown" (click)="locationFilter.open()">
           <mat-label class="filter">{{ 'homepage.events.filter-location' | translate }}</mat-label>
           <mat-select #locationFilter [formControl]="locationFilterControl" multiple>
-            <mat-option [value]="0" (click)="toggleAllSelection(locationList, 'locationList')">{{
+            <mat-option [value]="0" (click)="toggleAllSelection(locationList, 'cities')">{{
               'homepage.events.filter-location-аny-location' | translate
             }}</mat-option>
             <mat-divider></mat-divider>
             <mat-option
               [value]="location"
               *ngFor="let location of eventLocationList"
-              (onSelectionChange)="updateSelectedFilters(location, $event)"
+              (onSelectionChange)="updateSelectedFilters(location, $event, locationList, 'cities', eventLocationList)"
             >
               {{ getLangValue(location.nameUa, location.nameEn) }}
             </mat-option>
@@ -57,23 +57,31 @@
         <div class="dropdown" (click)="statusFilter.open()">
           <mat-label class="filter">{{ 'homepage.events.filter-status' | translate }}</mat-label>
           <mat-select #statusFilter [formControl]="statusFilterControl" multiple>
-            <mat-option [value]="0" (click)="toggleAllSelection(statusesList, 'statusList')">{{
+            <mat-option [value]="0" (click)="toggleAllSelection(statusesList, 'statuses')">{{
               'homepage.events.filter-status-аny-status' | translate
             }}</mat-option>
             <mat-divider></mat-divider>
-            <mat-option [value]="status" *ngFor="let status of statusList" (onSelectionChange)="updateSelectedFilters(status, $event)">
+            <mat-option
+              [value]="status"
+              *ngFor="let status of statusList"
+              (onSelectionChange)="updateSelectedFilters(status, $event, statusesList, 'statuses', statusList)"
+            >
               {{ getLangValue(status.nameUa, status.nameEn) }}
             </mat-option>
           </mat-select>
         </div>
         <div class="dropdown" (click)="typeFilter.open()">
           <mat-label class="filter">{{ 'homepage.events.filter-type' | translate }}</mat-label>
           <mat-select #typeFilter [formControl]="typeFilterControl" multiple>
-            <mat-option [value]="0" (click)="toggleAllSelection(typesList, 'typeList')">{{
+            <mat-option [value]="0" (click)="toggleAllSelection(typesList, 'tags')">{{
               'homepage.events.filter-аny-type' | translate
             }}</mat-option>
             <mat-divider></mat-divider>
-            <mat-option *ngFor="let type of typeList" [value]="type" (onSelectionChange)="updateSelectedFilters(type, $event)">
+            <mat-option
+              *ngFor="let type of typeList"
+              [value]="type"
+              (onSelectionChange)="updateSelectedFilters(type, $event, typesList, 'tags', typeList)"
+            >
               <span>{{ getLangValue(type.nameUa, type.nameEn) }}</span>
             </mat-option>
           </mat-select>
@@ -86,7 +94,7 @@
     <hr />
     <div class="active-filter-container">
       <p>
-        {{ 'homepage.events.item-found-text' | translate }} {{ selectedFilters.length }}
+        {{ 'homepage.events.item-found-text' | translate }} {{ remaining }}
         {{ 'homepage.events.items-event-text' | translate }}
       </p>
       <div class="chips">

diff --git a/src/app/main/component/events/components/events-list/events-list.component.spec.ts b/src/app/main/component/events/components/events-list/events-list.component.spec.ts
@@ -13,14 +13,20 @@ import { Store } from '@ngrx/store';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { eventStatusList, TagsArray, eventTimeList } from '../../models/event-consts';
 import { By } from '@angular/platform-browser';
-import { MatOption } from '@angular/material/core';
+import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
 import { FormControl } from '@angular/forms';
 import { EventPageResponceDto } from '../../models/events.interface';
 
 describe('EventsListComponent', () => {
   let component: EventsListComponent;
   let fixture: ComponentFixture<EventsListComponent>;
-
+  const eventStatusList = [
+    { nameEn: 'Open', nameUa: 'Відкритa' },
+    { nameEn: 'Closed', nameUa: 'Закритa' },
+    { nameEn: 'Joined', nameUa: 'Вже доєднані' },
+    { nameEn: 'Created', nameUa: 'Створенa' },
+    { nameEn: 'Saved', nameUa: 'Збережена' }
+  ];
   const MockReqest = {
     page: [],
     totalElements: 4
@@ -223,7 +229,7 @@ describe('EventsListComponent', () => {
       { nameEn: 'two', nameUa: 'два' },
       { nameEn: 'three', nameUa: 'три' }
     ];
-    const filterRemoved = [{ nameEn: 'three', nameUa: 'три' }];
+    const filterRemoved = { nameEn: 'three', nameUa: 'три' };
     const res = [
       { nameEn: 'one', nameUa: 'один' },
       { nameEn: 'two', nameUa: 'два' }
@@ -240,6 +246,7 @@ describe('EventsListComponent', () => {
     expect(spy).toHaveBeenCalledTimes(1);
     expect(component.selectedFilters).toEqual(res);
   });
+
   it('should check weather getUniqueCities works correctly', () => {
     const expected = [
       { nameEn: 'Kyiv', nameUa: 'Київ' },
@@ -280,57 +287,29 @@ describe('EventsListComponent', () => {
     });
   });
 
-  it('should subscribe to form control changes for all form controls', () => {
-    component.timeFilterControl = timeFilterControl;
-    component.locationFilterControl = locationFilterControl;
-    component.statusFilterControl = statusFilterControl;
-    component.typeFilterControl = typeFilterControl;
-
-    const spy = spyOn(component, 'updateSelectedFilters');
-
-    component.subscribeOnFormControlsChanges();
-
-    timeFilterControl.setValue('Some value');
-    locationFilterControl.setValue('Some value');
-    statusFilterControl.setValue('Some value');
-    typeFilterControl.setValue('Some value');
-
-    expect(spy).toHaveBeenCalledTimes(4);
-  });
-
   it('should remove existing filter when deselected', () => {
-    component.selectedFilters = ['filter1', 'filter2'];
-    const mockEvent = { isUserInput: true, source: { selected: false } };
-    component.updateSelectedFilters('filter1', mockEvent);
-    expect(component.selectedFilters).toEqual(['filter2']);
+    let mockEvent: MatOptionSelectionChange = {
+      isUserInput: true,
+      source: { selected: true } as MatOption
+    };
+    component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList);
+    component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
+    mockEvent = { isUserInput: true, source: { selected: false } as MatOption };
+    component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
+    expect(component.selectedFilters).toEqual([{ nameEn: 'Open', nameUa: 'Відкритa' }]);
   });
 
   it('should add new filter when selected', () => {
-    component.selectedFilters = ['filter1', 'filter2'];
-    const mockEvent = { isUserInput: true, source: { selected: true } };
-    component.updateSelectedFilters('filter3', mockEvent);
-    expect(component.selectedFilters).toEqual(['filter1', 'filter2', 'filter3']);
-  });
-
-  it('should not modify selectedFilters when no user input', () => {
-    component.selectedFilters = ['filter1', 'filter2'];
-    const mockEvent = { isUserInput: false, source: { selected: true } };
-    component.updateSelectedFilters('filter3', mockEvent);
-    expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
-  });
-
-  it('should not modify selectedFilters when already deselected', () => {
-    component.selectedFilters = ['filter1', 'filter2'];
-    const mockEvent = { isUserInput: true, source: { selected: false } };
-    component.updateSelectedFilters('filter3', mockEvent);
-    expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
-  });
-
-  it('should not modify selectedFilters when already selected', () => {
-    component.selectedFilters = ['filter1', 'filter2'];
-    const mockEvent = { isUserInput: true, source: { selected: true } };
-    component.updateSelectedFilters('filter2', mockEvent);
-    expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
+    const mockEvent: MatOptionSelectionChange = {
+      isUserInput: true,
+      source: { selected: true } as MatOption
+    };
+    component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList);
+    component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
+    expect(component.selectedFilters).toEqual([
+      { nameEn: 'Open', nameUa: 'Відкритa' },
+      { nameEn: 'Closed', nameUa: 'Закритa' }
+    ]);
   });
 
   it('should check weather search works correctly', () => {