Fix description issues

floydnant · May 19, 2023 · f086eb7 · f086eb7
1 parent 770acb1
commit f086eb7
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 12 deletions.
diff --git a/client-v2/src/app/components/molecules/entity-description/entity-description.component.html b/client-v2/src/app/components/molecules/entity-description/entity-description.component.html
@@ -14,4 +14,5 @@
     placeholder="Description"
     (valueChanges)="descriptionChanges$.next($event)"
     (blur)="blurEvents$.next($event)"
+    data-test-name="description-editor"
 ></app-rt-editor>
diff --git a/client-v2/src/app/components/molecules/entity-description/entity-description.component.ts b/client-v2/src/app/components/molecules/entity-description/entity-description.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, Output, ViewChild } from '@angular/core'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { BehaviorSubject, filter, first, map, merge, Subject, switchMap, tap } from 'rxjs'
-import { FocusableDirective } from 'src/app/directives/focusable.directive'
+import { RtEditorComponent } from 'src/app/rich-text-editor/rt-editor/rt-editor.component'
 import { createEventEmitter } from 'src/app/utils/observable.helpers'
 
 @UntilDestroy()
@@ -17,7 +17,7 @@ export class EntityDescriptionComponent {
         this.description$.next(description)
     }
 
-    @ViewChild(FocusableDirective) focusable!: FocusableDirective // needed for outside access
+    @ViewChild(RtEditorComponent) editor!: RtEditorComponent // needed for outside access
 
     descriptionChanges$ = new BehaviorSubject<string | null>(null)
     blurEvents$ = new Subject<FocusEvent>()

diff --git a/client-v2/src/app/components/organisms/entity-view/views/task-view/task-view.component.html b/client-v2/src/app/components/organisms/entity-view/views/task-view/task-view.component.html
@@ -5,7 +5,7 @@ <h1 class="heading | mt-4">
 
     <app-entity-description
         #descriptionEditor
-        [hidden]="!(isDescriptionShown$ | async)"
+        *ngIf="isDescriptionShown$ | async"
         [description]="description$ | async"
         (descriptionChange)="onDescriptionUpdate($event)"
         (blur)="descriptionBlurEvents$.next($event)"
@@ -16,7 +16,7 @@ <h1 class="heading | mt-4">
             *ngIf="!(isDescriptionShown$ | async)"
             class="button-naked text-tinted-200 hover:text-tinted-100"
             appTooltip="Add a description to this task"
-            (click)="isDescriptionShown$.next(true); descriptionEditor.focusable.focus()"
+            (click)="isDescriptionShown$.next(true); focusDescription()"
             cdkMenuItem
             data-test-name="add-description"
         >

diff --git a/client-v2/src/app/components/organisms/entity-view/views/task-view/task-view.component.ts b/client-v2/src/app/components/organisms/entity-view/views/task-view/task-view.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Inject, ViewChild } from '@angular/core'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { Store } from '@ngrx/store'
 import {
@@ -18,6 +18,8 @@ import { entitiesSelectors } from 'src/app/store/entities/entities.selectors'
 import { taskActions } from 'src/app/store/entities/task/task.actions'
 import { getTaskById } from 'src/app/store/entities/utils'
 import { EntityViewData, ENTITY_VIEW_DATA } from '../../entity-view.component'
+import { EntityDescriptionComponent } from 'src/app/components/molecules/entity-description/entity-description.component'
+import { moveToMacroQueue } from 'src/app/utils'
 
 @UntilDestroy()
 @Component({
@@ -32,6 +34,13 @@ export class TaskViewComponent {
         private store: Store<AppState>
     ) {}
 
+    @ViewChild(EntityDescriptionComponent) entityDescription?: EntityDescriptionComponent
+    focusDescription() {
+        moveToMacroQueue(() => {
+            this.entityDescription?.editor.editor.commands.focus()
+        })
+    }
+
     taskEntity$ = this.viewData.entity$
     detail$ = this.viewData.detail$
     options$ = this.viewData.options$

diff --git a/...src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html b/...src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html
@@ -18,7 +18,7 @@ <h1 class="heading | mt-4">
 
     <app-entity-description
         #descriptionEditor
-        [hidden]="!(isDescriptionShown$ | async)"
+        *ngIf="isDescriptionShown$ | async"
         [description]="description$ | async"
         (descriptionChange)="onDescriptionUpdate($event)"
         (blur)="descriptionBlurEvents$.next($event)"
@@ -37,7 +37,7 @@ <h1 class="heading | mt-4">
             *ngIf="!(isDescriptionShown$ | async)"
             class="button-naked text-tinted-200 hover:text-tinted-100"
             appTooltip="Add a description to this list"
-            (click)="isDescriptionShown$.next(true); descriptionEditor.focusable.focus()"
+            (click)="isDescriptionShown$.next(true); focusDescription()"
             cdkMenuItem
             data-test-name="add-description"
         >

diff --git a/.../app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.test.ts b/.../app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.test.ts
@@ -16,6 +16,8 @@ import { TasklistViewComponent } from './tasklist-view.component'
 import { HighlightPipe } from 'src/app/pipes/highlight.pipe'
 import { RxModule } from 'src/app/rx/rx.module'
 import { DropdownModule } from 'src/app/dropdown/dropdown.module'
+import { RichTextEditorModule } from 'src/app/rich-text-editor/rich-text-editor.module'
+import { ToolbarComponent } from 'src/app/components/molecules/toolbar/toolbar.component'
 
 const setupComponent = (viewData: EntityViewData<TasklistDetail>, taskTreeMap: TaskTreeMap = {}) => {
     const store = {
@@ -29,7 +31,7 @@ const setupComponent = (viewData: EntityViewData<TasklistDetail>, taskTreeMap: T
     }
     cy.mount(`<app-tasklist-view></app-tasklist-view> `, {
         componentProperties: {},
-        imports: [CdkMenuModule, RxModule, DropdownModule],
+        imports: [CdkMenuModule, RxModule, DropdownModule, RichTextEditorModule],
         declarations: [
             TasklistViewComponent,
             MutationDirective,
@@ -39,6 +41,7 @@ const setupComponent = (viewData: EntityViewData<TasklistDetail>, taskTreeMap: T
             InlineEditorComponent,
             EntityDescriptionComponent,
             HighlightPipe,
+            ToolbarComponent,
         ],
         providers: [
             { provide: ENTITY_VIEW_DATA, useValue: viewData },
@@ -59,15 +62,15 @@ const entityFixture: EntityPreviewRecursive = {
 const entityDetailFixture: TasklistDetail = { description: null, createdAt: '', ownerId: '' }
 
 describe('TasklistViewComponent', () => {
-    it('renders the tasklist', () => {
+    it.only('renders the tasklist', () => {
         setupComponent({
             entity$: new BehaviorSubject(entityFixture),
             detail$: new BehaviorSubject(entityDetailFixture),
             options$: new BehaviorSubject(null),
         })
 
         cy.get(testName('editable-entity-name')).contains(entityFixture.title)
-        cy.get(testName('description-editor')).should('be.hidden')
+        cy.get(testName('description-editor')).should('not.exist')
         cy.get(testName('entity-children')).should('not.exist')
     })
 

diff --git a/...2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.ts b/...2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Inject, ViewChild } from '@angular/core'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { Store } from '@ngrx/store'
 import { BehaviorSubject, combineLatest, Subject } from 'rxjs'
@@ -10,6 +10,8 @@ import { entitiesSelectors } from 'src/app/store/entities/entities.selectors'
 import { listActions } from 'src/app/store/entities/list/list.actions'
 import { taskActions } from 'src/app/store/entities/task/task.actions'
 import { EntityViewData, ENTITY_VIEW_DATA } from '../../entity-view.component'
+import { EntityDescriptionComponent } from 'src/app/components/molecules/entity-description/entity-description.component'
+import { moveToMacroQueue } from 'src/app/utils'
 
 @UntilDestroy()
 @Component({
@@ -35,6 +37,13 @@ export class TasklistViewComponent {
         //     })
     }
 
+    @ViewChild(EntityDescriptionComponent) entityDescription?: EntityDescriptionComponent
+    focusDescription() {
+        moveToMacroQueue(() => {
+            this.entityDescription?.editor.editor.commands.focus()
+        })
+    }
+
     EntityType = EntityType
 
     listEntity$ = this.viewData.entity$

diff --git a/client-v2/src/app/components/organisms/task/task.component.html b/client-v2/src/app/components/organisms/task/task.component.html
@@ -202,7 +202,7 @@
                     'hasFocus !ring-primary-400': props.isFocused
                 }"
                 [value]="task.description ?? ''"
-                placeholder="Description or notes"
+                placeholder="Description"
                 (contentChanges)="descriptionChanges$.next($event)"
                 (isFocused)="isDescriptionFocused$.next($event)"
                 (blur)="descriptionBlurEvents$.next(null)"