Merge pull request #382 from manuelosorio/fix/core-list-page-features

[Fix] Core list page features Changes: Resolves: [Bug] Items form list cannot be updated list owner. #376 Resolves: [Bug] List owner cannot add new items to a list #377 Resolves: [Bug] Authenticated users cannot create new comments #378 Resolves: [Bug] Character limit indicator not displaying remaining characters #383 Resolves: [Bug] Comment updated tooltips show creation date #384 Removes "No Deadline" state from deadline component. Improve comment creation experience. User can now edit or delete a comment they just created (without refreshing page view). Convert title in list-header component to an h1 for SEO and visual hierarchy (previously was a p element). Populate deadline input in edit-item component with item's current deadline (if applicable).
manuelosorio · Oct 13, 2024 · cd1fe3c · cd1fe3c
2 parents 59be00e + 67d9f5b
commit cd1fe3c
Show file tree

Hide file tree

Showing 22 changed files with 583 additions and 275 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,8 +1,6 @@
 name: Build Angular
 on:
   pull_request:
-    branches:
-      - master
 jobs:
   Build:
     runs-on: ubuntu-latest

diff --git a/setup-jest.ts b/setup-jest.ts
@@ -1,7 +1,7 @@
 import 'jest-preset-angular/setup-jest';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { IconsModule } from './src/app/_modules/icons/icons.module';
+import { IconsModule } from '@modules/icons/icons.module';
 
 // Configure global testing setup
 beforeAll(() => {

diff --git a/src/app/_components/add-item/add-item.component.html b/src/app/_components/add-item/add-item.component.html
@@ -1,37 +1,35 @@
-@if (isOwner) {
-  <form [formGroup]="listItemForm" (ngSubmit)="onSubmit(listItemForm.value)">
-    <div class="l-row">
-      <fieldset class="form__fieldset">
-        <input
-          type="text"
-          formControlName="item"
-          id="list_item"
-          class="form__input"
-          placeholder="List Item"
-        />
-        <label class="form__label" for="list_item">List Item Name</label>
-      </fieldset>
-      <fieldset class="form__fieldset">
-        <input
-          type="date"
-          formControlName="deadline"
-          id="deadline"
-          class="form__input"
-          placeholder="Deadline"
-          pattern="\d{4}-\d{2}-\d{2}"
-        />
-        <label class="form__label" for="deadline">Deadline (Optional)</label>
-      </fieldset>
-    </div>
-    <div class="l-row">
-      <button
-        class="btn btn--primary form__btn"
-        [class.btn--disabled]='item.invalid'
-        [disabled]="item.invalid"
-        type="submit"
-      >
-        Add Item
-      </button>
-    </div>
-  </form>
-}
+<form [formGroup]="listItemForm" (ngSubmit)="onSubmit(listItemForm.value)">
+  <div class="l-row">
+    <fieldset class="form__fieldset">
+      <input
+        type="text"
+        formControlName="item"
+        id="list_item"
+        class="form__input"
+        placeholder="List Item"
+      />
+      <label class="form__label" for="list_item">List Item Name</label>
+    </fieldset>
+    <fieldset class="form__fieldset">
+      <input
+        type="date"
+        formControlName="deadline"
+        id="deadline"
+        class="form__input"
+        placeholder="Deadline"
+        pattern="\d{4}-\d{2}-\d{2}"
+      />
+      <label class="form__label" for="deadline">Deadline (Optional)</label>
+    </fieldset>
+  </div>
+  <div class="l-row">
+    <button
+      class="btn btn--primary form__btn"
+      [class.btn--disabled]='item.invalid'
+      [disabled]="item.invalid"
+      type="submit"
+    >
+      Add Item
+    </button>
+  </div>
+</form>
diff --git a/src/app/_components/create-comment/create-comment.component.html b/src/app/_components/create-comment/create-comment.component.html
@@ -32,8 +32,7 @@
       <app-character-counter
         [minimumCharacters]="20"
         [maximumCharacters]="500"
-        [minCharacterCounter]="commentCharacterCount"
-        [maxCharacterCounter]="commentCharacterCount"
+        [CharacterCounter]="commentCharacterCount"
       ></app-character-counter>
     </div>
   </form>

diff --git a/src/app/_components/edit-comment/edit-comment.component.html b/src/app/_components/edit-comment/edit-comment.component.html
@@ -38,8 +38,7 @@
     <app-character-counter
       [minimumCharacters]="20"
       [maximumCharacters]="500"
-      [minCharacterCounter]="commentCharacterCount"
-      [maxCharacterCounter]="commentCharacterCount"
+      [CharacterCounter]="commentCharacterCount"
     >
     </app-character-counter>
   </div>

diff --git a/src/app/_components/edit-list-item/edit-list-item.component.ts b/src/app/_components/edit-list-item/edit-list-item.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  input,
+  InputSignal,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
 import {
   AbstractControl,
   ReactiveFormsModule,
@@ -19,35 +25,40 @@ import { ActionButtonComponent } from '@shared/action-button/action-button.compo
   imports: [ReactiveFormsModule, ActionButtonComponent],
 })
 export class EditListItemComponent implements OnInit {
-  @Input() listItem!: ListItemModel;
+  listItem: InputSignal<ListItemModel> = input.required<ListItemModel>();
   public listItemForm!: UntypedFormGroup;
   constructor(
     private formBuilder: UntypedFormBuilder,
     private listService: ListsService
-  ) {}
+  ) {
+    this.listItemForm = this.formBuilder.group({
+      item: ['', [Validators.required]],
+      deadline: [''],
+    });
+  }
   cancel(): void {
-    this.listItem.isEditing = false;
+    this.listItem().isEditing = false;
   }
 
   submit(data: ListItemModel): void {
-    data.list_id = this.listItem.list_id;
-    this.listService.updateItem(data, this.listItem.id).subscribe({
+    data.list_id = this.listItem().list_id;
+    this.listService.updateItem(data, this.listItem().id).subscribe({
       next: _res => {
-        this.listItem.isEditing = false;
+        this.listItem().isEditing = false;
       },
       error: error => {
         console.error(error);
       },
     });
   }
   ngOnInit(): void {
-    this.listItemForm = this.formBuilder.group({
-      item: ['', [Validators.required]],
-      deadline: [''],
-    });
+    const { deadline, item } = this.listItem();
+    const formattedDeadline = deadline
+      ? new Date(deadline).toISOString().substring(0, 10)
+      : null;
     this.listItemForm.setValue({
-      item: this.listItem.item,
-      deadline: this.listItem.deadline ?? null,
+      item,
+      deadline: formattedDeadline,
     });
   }
   get item(): AbstractControl {

diff --git a/src/app/_components/list-comments/list-comments.component.html b/src/app/_components/list-comments/list-comments.component.html
@@ -1,18 +1,18 @@
 <section class="l-container" id="comments">
   @if (commentsEnabled) {
     <h3>Comments ({{ count ? count : 0 }})</h3>
-    <!--    <div class="l-row">-->
-    <!--      @if (isAuth) {-->
-    <!--        <app-create-comment class="app-create-comment"></app-create-comment>-->
-    <!--      } @else {-->
-    <!--        <p>-->
-    <!--          You must be logged in to create comment.-->
-    <!--          <a routerLink="/login" [queryParams]="{ returnUrl: this.returnUrl }">-->
-    <!--            Login to account.-->
-    <!--          </a>-->
-    <!--        </p>-->
-    <!--      }-->
-    <!--    </div>-->
+    <div class="l-row">
+      @if (isAuth) {
+        <app-create-comment class="app-create-comment"></app-create-comment>
+      } @else {
+        <p>
+          You must be logged in to create comment.
+          <a routerLink="/login" [queryParams]="{ returnUrl: this.returnUrl }">
+            Login to account.
+          </a>
+        </p>
+      }
+    </div>
     @for (comment of comments; track comment) {
       @if (!comment.isEditing) {
         <article class="card comment">
@@ -27,19 +27,23 @@ <h3>Comments ({{ count ? count : 0 }})</h3>
                 Created
               }
               {{ comment['time_difference'] }}
-              <span class="tooltip">{{
-                comment['formatted_creation_date']
-              }}</span>
+              <span class="tooltip">
+                @if (comment.date_updated) {
+                  {{ comment.date_updated | date: 'mediumDate' }}
+                } @else {
+                  {{ comment.creation_date | date: 'mediumDate' }}
+                }
+              </span>
             </em>
           </div>
           <div>
             @if (isListOwner || comment.is_owner) {
               @if (comment.is_owner) {
-                <button (click)="edit(comment)">
+                <button (click)="edit(comment)" id='edit-comment'>
                   <i-feather name="edit"></i-feather> Edit
                 </button>
               }
-              <button (click)="delete(comment.id)">
+              <button (click)="delete(comment.id)" id='delete-comment'>
                 <i-feather name="trash"></i-feather> Delete
               </button>
             }

diff --git a/src/app/_components/list-comments/list-comments.component.sass b/src/app/_components/list-comments/list-comments.component.sass
@@ -36,7 +36,7 @@
         text-align: center
         border-radius: .5625em .5625em 0 0
         width: fit-content
-        min-width: 100%
+        min-width: 102%
       &:hover
         .tooltip
           visibility: visible