Merge pull request #274 from farhanp1502/Mitra-release-1.0.0

issues related to dynamic form, dots for the carousel in mi-details testimonials and ongoing cards alignment

package.json

@@ -35,7 +35,7 @@
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "authentication_frontend_library": "^1.0.21",
-    "elevate-dynamic-form": "^0.0.13",
+    "elevate-dynamic-form": "^0.0.15",
     "ionicons": "^7.0.0",
     "jwt-decode": "^4.0.0",
     "network-service": "^0.0.1",

src/app/home/home.page.ts

@@ -153,4 +153,9 @@ async  getdata() {
     window.location.href = "/create-project/mitra-chat"
   }
 
+  ionViewWillLeave(){
+    this.spotlightstories=[];
+    this.myImprovements = [];
+    this.recommendationList=[];
+  }
 }

src/app/mi-details/mi-details.page.html

@@ -16,6 +16,8 @@ <h1 class="text-header">{{projectDetails.title}}</h1>
         <app-carousel
           [items]="projectDetails?.testimonials"
           [template]="itemTemplate1"
+          [showDots]="true"
+          [itemsToShow]="projectDetails?.testimonials.length"
         >
         <ion-row>
         <ng-template #itemTemplate1 let-item="$item" let-index="$index">
@@ -28,13 +30,6 @@ <h1 class="text-header">{{projectDetails.title}}</h1>
         </ion-row>
         </app-carousel>
     </ion-grid>
-    @if (projectDetails?.testimonials?.length > 1) {
-      <div class="dots">
-        @for (item of dots; track $index) {
-          <span></span>
-        }
-      </div>
-    }
   </div>
 }
   </div>

src/app/mi-details/mi-details.page.scss

@@ -125,16 +125,3 @@ ion-footer {
   }
 }
 
-.dots {
-  text-align: center;
-  margin-top: 10px;
-
-  span {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin: 0 5px;
-    background-color: grey;
-    border-radius: 50%;
-  }
-}

src/app/mi-details/mi-details.page.ts

@@ -100,7 +100,6 @@ export class MiDetailsPage implements OnInit {
         }
         this.saved= res?.result?.wishlist
         this.headerConfig.customActions = [{ icon: this.saved ? 'bookmark' : 'bookmark-outline', actionName: 'save' }];
-        this.getDots();
       }
     },
     (err: any) => {
@@ -113,14 +112,4 @@ export class MiDetailsPage implements OnInit {
     this.router.navigate(['/mi-details/add-problem-statement',this.projectId]);
   }
 
-  getDots():any {
-    const length = this.projectDetails?.testimonials?.length || 0;
-  if (length === 2) {
-    this.dots = Array(2).fill(0);
-  } else if (length >= 3) {
-    this.dots = Array(3).fill(0);
-  } else {
-    this.dots = [];
-  }
-}
 }

src/app/my-journeys-listing/my-journey/my-journey.page.html

@@ -14,7 +14,7 @@ <h1  >{{programName}}</h1>
     </ion-segment>
 
   @if (selectedSegment === filterActions.inProgress && myJourneyInprogress.length > 0) {
-          <div class="cards-list  layout-wrapper">
+          <div class="cards-list ion-padding">
           @for (item of myJourneyInprogress; track $index) {
             <app-my-journey-ongoing-card [data]="item"></app-my-journey-ongoing-card>
           }

src/app/profile-edit/profile-edit.page.html

@@ -15,11 +15,11 @@ <h1 class="header-text">{{"PROFILE_EDIT"|translate}}</h1>
     (imageRemoveEvent)="imageRemoveEvent($event)"></app-profile-image>
   <div class="ion-margin-top container" *ngIf="enableForm">
     <dynamic-form [formJson]="formJson" #formLib (onChange)="onOptionChange($event)"
-      (ionFocus)="handleSelectFocus($event)"></dynamic-form>
+      (ionFocus)="handleSelectFocus($event)" [language]="selectedLanguage"></dynamic-form>
   </div>
   <div class="ion-margin-top container" *ngIf="formJson2?.length > 0">
     <dynamic-form [formJson]="formJson2" #formLib2 (onChange)="onOptionChange2($event)"
-      (ionFocus)="handleSelectFocus($event)"></dynamic-form>
+      (ionFocus)="handleSelectFocus($event)" [language]="selectedLanguage"></dynamic-form>
   </div>
   </div>
 </ion-content>

src/app/profile-edit/profile-edit.page.ts

@@ -30,6 +30,7 @@ export class ProfileEditPage implements isDeactivatable {
   enableForm: boolean = false;
   dynamicEntityValueChanged:boolean = false;
   subUrl = (environment.baseURL.includes('project') ?  urlConfig.subProject : urlConfig.subSurvey )
+  selectedLanguage:any;
 
   constructor(
     private apiBaseService: ApiBaseService,
@@ -42,6 +43,8 @@ export class ProfileEditPage implements isDeactivatable {
   ) { }
 
   ionViewWillEnter() {
+    let preferredLanguage:any = localStorage.getItem('preferred_language')
+    this.selectedLanguage = JSON.parse(preferredLanguage)?.value
     this.loadFormAndData();
   }
 

src/app/profile/profile.page.html

@@ -40,9 +40,9 @@ <h1>{{formData?.name}}</h1>
   </div>
 
   <div class="ion-margin-top container profileView" *ngIf="enableFormOne">
-    <dynamic-form [formJson]="formJson" #formLib></dynamic-form>
+    <dynamic-form [formJson]="formJson" #formLib [language]="selectedLanguage"></dynamic-form>
   </div>
   <div class="ion-margin-top container profileView secondForm" *ngIf="enableFormTwo">
-    <dynamic-form [formJson]="formJson2" #formLib2 ></dynamic-form>
+    <dynamic-form [formJson]="formJson2" #formLib2 [language]="selectedLanguage" ></dynamic-form>
   </div>
 </ion-content>

src/app/shared/carousel/carousel.component.html

@@ -7,3 +7,14 @@
 
   }
 </div>
+
+@if (showDots) {
+  <div class="dots">
+    @for (item of items; track item;let i = $index) {
+      <span
+        (click)="navigateToSlide(i)"
+        [class.active]="i === activeSlide"
+      ></span>
+    }
+  </div>
+}

src/app/shared/carousel/carousel.component.scss

@@ -1,6 +1,25 @@
 .desktop-container{
   display: flex;
-  flex-direction: row;
   overflow-x: scroll;
+  scroll-behavior: smooth;
   scrollbar-width: none;
-}
+}
+.dots {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+
+  span {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    border-radius: 50%;
+    background-color: lightgray;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &.active {
+      background-color: var(--ion-color-primary);
+    }
+  }
+}

src/app/shared/carousel/carousel.component.ts

@@ -12,6 +12,20 @@ export class CarouselComponent{
   @Input() items: any[] = [];
   @Input() template: any;
   @Input() itemsToShow = 4;
-  constructor() { }
+  @Input() showDots = false;
+  activeSlide = 0;
 
+  constructor() {}
+
+  navigateToSlide(index: number): void {
+    this.activeSlide = index;
+    this.scrollToSlide(index);
+  }
+
+  scrollToSlide(index: number): void {
+    const container = document.querySelector('.desktop-container') as HTMLElement;
+    if (container) {
+      container.scrollLeft = container.offsetWidth * index;
+    }
+  }
 }