Feature_add_ability_to_edit_custom_habit

src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.html

@@ -1,6 +1,7 @@
 <div class="wrapper">
   <div class="create-habit-header">
-    <h1 class="header-title">{{ 'user.habit.add-new-habit.create-habit' | translate }}</h1>
+    <h1 class="header-title" *ngIf="!isEditing">{{ 'user.habit.add-new-habit.create-habit' | translate }}</h1>
+    <h1 class="header-title" *ngIf="isEditing">{{ 'user.habit.add-new-habit.edit-habit' | translate }}</h1>
     <p>{{ 'user.habit.add-new-habit.create-habit-subtitle' | translate }}</p>
   </div>
   <div class="create-habit-main">
@@ -30,7 +31,7 @@ <h1 class="header-title">{{ 'user.habit.add-new-habit.create-habit' | translate
                 <li *ngFor="let item of complexityList" class="star-button">
                   <span ngbPopover="{{ item.name | translate }}" triggers="mouseenter:mouseleave" placement="bottom" container="body">
                     <label>
-                      <input type="radio" name="complexity" [value]="item.value" formControlName="complexity" />
+                      <input type="radio" name="complexity" [value]="item.value" />
                       <img [src]="getStars(item.value, getControl('complexity').value)" [alt]="item.alt" />
                     </label>
                   </span>
@@ -54,6 +55,7 @@ <h3 class="label">{{ 'user.habit.add-new-habit.textarea-title' | translate }}</h
               class="editor"
               ngDefaultControl
               [modules]="quillModules"
+              formControlName="description"
               (dragover)="(false)"
               [placeholder]="'user.habit.add-new-habit.description-placeholder' | translate"
               (onEditorChanged)="changeEditor($event)"
@@ -103,9 +105,12 @@ <h3 class="label">{{ 'user.habit.add-new-habit.textarea-title' | translate }}</h
           <button class="tertiary-global-button" (click)="cancel(true)">
             {{ 'user.habit.btn.cancel' | translate }}
           </button>
-          <button class="primary-global-button" [disabled]="habitForm.invalid" type="submit" (click)="addHabit()">
+          <button *ngIf="!isEditing" class="primary-global-button" [disabled]="habitForm.invalid" type="submit" (click)="addHabit()">
             {{ 'user.habit.btn.add' | translate }}
           </button>
+          <button *ngIf="isEditing" class="primary-global-button" [disabled]="habitForm.invalid" type="submit" (click)="saveHabit()">
+            {{ 'user.habit.btn.save' | translate }}
+          </button>
         </div>
       </div>
     </form>

src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.ts

@@ -88,6 +88,12 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On
     this.subscribeToLangChange();
     this.previousPath = `/profile/${this.userId}/allhabits`;
     this.userFriendsService.addedFriends.length = 0;
+    this.isEditing = this.router.url?.includes('edit-habit');
+
+    if (this.isEditing) {
+      this.habit = this.isEditing ? this.localStorageService.getHabitForEdit() : null;
+      this.setEditHabit();
+    }
   }
 
   private getUserId() {
@@ -106,6 +112,17 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On
     });
   }
 
+  private setEditHabit(): void {
+    this.habitForm.patchValue({
+      title: this.habit.habitTranslation.name,
+      description: this.habit.habitTranslation.description,
+      complexity: this.habit.complexity,
+      image: this.habit.image
+    });
+    this.initialDuration = this.habit.defaultDuration;
+    this.shopList = this.habit.shoppingListItems || this.habit.customShoppingListItems || [];
+  }
+
   public trimValue(control: AbstractControl): void {
     control.setValue(control.value.trim());
   }
@@ -179,4 +196,8 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On
         this.goToAllHabits();
       });
   }
+
+  saveHabit(): void {
+    // TO DO: implement logic to save changes
+  }
 }

src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html

@@ -77,6 +77,14 @@ <h3>{{ 'user.habit.info' | translate }}</h3>
       <button class="primary-global-button habit-btn" type="button" (click)="addHabit()">
         {{ 'user.habit.btn.add' | translate }}
       </button>
+      <button
+        class="primary-global-button habit-btn"
+        type="button"
+        *ngIf="habitResponse.usersIdWhoCreatedCustomHabit === userId"
+        (click)="editUsersCustomHabit(habitAssignId ? 'edithabit' : 'addhabit', habitResponse.id)"
+      >
+        {{ 'user.habit.btn.edit' | translate }}
+      </button>
     </div>
     <div *ngIf="isEditing && !isAcquired" class="add-habit-container">
       <button class="tertiary-global-button habit-btn" (click)="giveUpHabit()">
@@ -88,6 +96,14 @@ <h3>{{ 'user.habit.info' | translate }}</h3>
       <button class="primary-global-button habit-btn" type="button" (click)="updateHabit()">
         {{ 'user.habit.btn.save' | translate }}
       </button>
+      <button
+        class="primary-global-button habit-btn"
+        type="button"
+        *ngIf="habitResponse.usersIdWhoCreatedCustomHabit === userId"
+        (click)="editUsersCustomHabit('edithabit', habitAssignId ? habitAssignId : habitResponse.id)"
+      >
+        Edit Habit
+      </button>
     </div>
   </div>
   <app-habits-widget

src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.ts

@@ -58,8 +58,8 @@ export class AddNewHabitComponent implements OnInit {
   star: number;
 
   private habitId: number;
-  private habitAssignId: number;
-  private userId: number;
+  public habitAssignId: number;
+  public userId: number;
   private currentLang: string;
   private enoughToAcquire = 80;
   private page = 0;
@@ -261,6 +261,12 @@ export class AddNewHabitComponent implements OnInit {
       });
   }
 
+  editUsersCustomHabit(url: string, id: number): void {
+    this.localStorageService.setEditMode('canUserEdit', true);
+    this.localStorageService.setHabitForEdit(url, this.habitResponse);
+    this.router.navigate([`profile/${this.userId}/allhabits/${url}/${id}/edit-habit`]);
+  }
+
   goToProfile(): void {
     this.router.navigate(['profile', this.userId]);
   }

src/app/main/component/user/components/habit/mocks/habit-assigned-mock.ts

@@ -14,6 +14,7 @@ export const DEFAULTHABIT: HabitInterface = {
     name: 'Default habit'
   },
   id: 1,
+  usersIdWhoCreatedCustomHabit: 33,
   image: 'https://www.testgreencity.ga/assets/img/habits/man.svg',
   shoppingListItems: [],
   tags: [],
@@ -33,6 +34,7 @@ export const CUSTOMHABIT: HabitInterface = {
     name: 'Custom habit'
   },
   id: 2,
+  usersIdWhoCreatedCustomHabit: 50,
   image: '',
   shoppingListItems: [],
   tags: [],

src/app/main/component/user/components/habit/models/interfaces/habit.interface.ts

@@ -11,6 +11,7 @@ export interface HabitInterface {
   amountAcquiredUsers: number;
   habitAssignStatus?: string;
   isCustomHabit: boolean;
+  usersIdWhoCreatedCustomHabit: number;
   customShoppingListItems?: ShoppingList[];
   shoppingListItems?: ShoppingList[];
   tags: Array<string>;

src/app/main/component/user/user-routing.module.ts

@@ -25,6 +25,8 @@ export const userRoutes: Routes = [
       { path: ':id/notifications', component: UserNotificationsComponent },
       { path: ':id/allhabits', component: AllHabitsComponent },
       { path: ':id/create-habit', component: AddEditCustomHabitComponent },
+      { path: ':id/allhabits/edithabit/:habitAssignId/edit-habit', component: AddEditCustomHabitComponent },
+      { path: ':id/allhabits/addhabit/:habitId/edit-habit', component: AddEditCustomHabitComponent },
       { path: ':id/allhabits/addhabit/:habitId', component: AddNewHabitComponent },
       { path: ':id/allhabits/edithabit/:habitAssignId', component: AddNewHabitComponent },
       { path: '', component: ProfileComponent },

src/app/main/service/localstorage/local-storage.service.ts

@@ -2,6 +2,7 @@ import { Language } from '../../i18n/Language';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { EventPageResponceDto } from '../../component/events/models/events.interface';
+import { HabitInterface } from '@global-user/components/habit/models/interfaces/habit.interface';
 import { CourierLocations, Address } from 'src/app/ubs/ubs/models/ubs.interface';
 
 @Injectable({
@@ -15,6 +16,7 @@ export class LocalStorageService {
   private readonly PREVIOUS_PAGE = 'previousPage';
   private readonly CAN_USER_EDIT_EVENT = 'canUserEdit';
   private readonly EDIT_EVENT = 'editEvent';
+  private EDIT_HABIT = '';
   private readonly ORDER_TO_REDIRECT = 'orderIdToRedirect';
   private readonly HABITS_GALLERY_VIEW = 'habitsGalleryView';
 
@@ -34,6 +36,15 @@ export class LocalStorageService {
     return JSON.parse(localStorage.getItem(this.HABITS_GALLERY_VIEW));
   }
 
+  public setHabitForEdit(key: string, habit: HabitInterface) {
+    this.EDIT_HABIT = key;
+    localStorage.setItem(key, JSON.stringify(habit));
+  }
+
+  public getHabitForEdit() {
+    return JSON.parse(localStorage.getItem(this.EDIT_HABIT));
+  }
+
   public getAccessToken(): string {
     return localStorage.getItem(this.ACCESS_TOKEN);
   }

src/assets/i18n/en.json

@@ -707,7 +707,8 @@
     "habit": {
       "btn": {
         "back-to-habit": "Back to my habits",
-        "save": "Save",
+        "save": "Save Changes",
+        "edit": "Edit Habit",
         "give-up": "Give up",
         "acquire": "Acquire",
         "add": "Add Habit",
@@ -759,6 +760,7 @@
       },
       "add-new-habit": {
         "create-habit": "Create habit",
+        "edit-habit": "Edit habit",
         "create-habit-subtitle": "Please provide as many details as you can - choose thematic sections and the duration of the habit, add a to-do list, etc. You can come back and update habit anytime after publishing.",
         "habit-title": "Habit title",
         "habit-title-placeholder": "Enter name for the habit",

src/assets/i18n/ua.json

@@ -713,6 +713,7 @@
       "btn": {
         "back-to-habit": "Повернутись до моїх звичок",
         "save": "Зберегти",
+        "edit": "Редагувати",
         "give-up": "Здатися",
         "acquire": "Набути звичку",
         "add": "Додати звичку",
@@ -764,6 +765,7 @@
       },
       "add-new-habit": {
         "create-habit": "Створити звичку",
+        "edit-habit": "Редагувати звичку",
         "create-habit-subtitle": "Будь ласка, надайте якомога більше деталей - оберіть тематичні розділи та тривалість звички, додайте список задач тощо. Ви можете повернутись та оновити звичку в будь-який час після публікації.",
         "habit-title": "Назва звички",
         "habit-title-placeholder": "Введіть назву звички",