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 index 834f5a0f..c9d58042 100644 --- 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" > 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 index 8b21b85e..53f2ff9b 100644 --- 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(null) blurEvents$ = new Subject() 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 index f8463ef4..36d94d9a 100644 --- 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 @@

*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 index 8e331268..ed6f707e 100644 --- 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 ) {} + @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/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html b/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html index 69409237..1ec9ed4e 100644 --- a/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html +++ b/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.html @@ -18,7 +18,7 @@

*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/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.test.ts b/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.test.ts index e4f22c2f..ac7a307d 100644 --- a/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.test.ts +++ b/client-v2/src/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, taskTreeMap: TaskTreeMap = {}) => { const store = { @@ -29,7 +31,7 @@ const setupComponent = (viewData: EntityViewData, taskTreeMap: T } cy.mount(` `, { componentProperties: {}, - imports: [CdkMenuModule, RxModule, DropdownModule], + imports: [CdkMenuModule, RxModule, DropdownModule, RichTextEditorModule], declarations: [ TasklistViewComponent, MutationDirective, @@ -39,6 +41,7 @@ const setupComponent = (viewData: EntityViewData, taskTreeMap: T InlineEditorComponent, EntityDescriptionComponent, HighlightPipe, + ToolbarComponent, ], providers: [ { provide: ENTITY_VIEW_DATA, useValue: viewData }, @@ -59,7 +62,7 @@ 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), @@ -67,7 +70,7 @@ describe('TasklistViewComponent', () => { }) 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/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.ts b/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.ts index db0d1f3a..371c2f47 100644 --- a/client-v2/src/app/components/organisms/entity-view/views/tasklist-view/tasklist-view.component.ts +++ b/client-v2/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 index 231b9d5c..21c6845a 100644 --- 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)"