Complete entity refactor [rebased]

client-v2/package.json

@@ -7,6 +7,7 @@
         "build": "ng build",
         "watch": "ng build --watch --configuration development",
         "update-colors": "ts-node ./tools/update-colors.cts",
+        "sync-shared": "rsync -avz src/app/fullstack-shared-models ../server/src/",
         "lint": "eslint \"{src,app,test,cypress}/**/**.{ts,html}\"",
         "lint:fix": "npm run lint -- --fix",
         "unit": "ng test",

client-v2/src/app/app-routing.module.ts

@@ -69,7 +69,7 @@ const routes: Routes = [
                     inject(Store).select((state: AppState) => {
                         const activeEntityId = route.paramMap.get('id') as string
                         const activeEntity = getEntityById(state.entities.entityTree || [], activeEntityId)
-                        return activeEntity ? `${activeEntity.name} ${APP_TITLE_SUFFIX}` : APP_TITLE
+                        return activeEntity ? `${activeEntity.title} ${APP_TITLE_SUFFIX}` : APP_TITLE
                     }),
             },
             { path: '', component: DashboardComponent, title: `Dashboard ${APP_TITLE_SUFFIX}` },

client-v2/src/app/app.module.ts

@@ -49,7 +49,7 @@ import { MenuToggleComponent } from './components/templates/sidebar-layout/menu-
 import { DashboardComponent } from './pages/home/dashboard/dashboard.component'
 import { EntityViewComponent } from './components/organisms/entity-view/entity-view.component'
 import { TasklistViewComponent } from './components/organisms/entity-view/views/tasklist-view/tasklist-view.component'
-import { EditableEntityNameComponent } from './components/molecules/editable-entity-heading/editable-entity-name.component'
+import { EditableEntityTitleComponent } from './components/molecules/editable-entity-heading/editable-entity-title.component'
 
 @NgModule({
     declarations: [
@@ -87,7 +87,7 @@ import { EditableEntityNameComponent } from './components/molecules/editable-ent
         DashboardComponent,
         EntityViewComponent,
         TasklistViewComponent,
-        EditableEntityNameComponent,
+        EditableEntityTitleComponent,
     ],
     imports: [
         BrowserModule,

client-v2/src/app/components/atoms/icons/page-entity-icon/page-entity-icon.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { EntityType } from 'src/app/models/entities.model'
-import { TaskStatus } from 'src/app/models/task.model'
+import { EntityType } from 'src/app/fullstack-shared-models/entities.model'
+import { TaskStatus } from 'src/app/fullstack-shared-models/task.model'
 
 export enum PageEntityState {
     LOADING = 'Loading',

client-v2/src/app/components/atoms/icons/priority-icon/priority-icon.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { TaskPriority } from 'src/app/models/task.model'
+import { TaskPriority } from 'src/app/fullstack-shared-models/task.model'
 
 const statusIconClassMap: Record<TaskPriority, { amount?: number; class: string }> = {
     [TaskPriority.OPTIONAL]: { class: 'fas fa-question text-submit-400' },

client-v2/src/app/components/molecules/editable-entity-heading/editable-entity-title.component.html

@@ -0,0 +1,26 @@
+<div class="inline-flex items-center" *ngIf="entity$ | async as entity">
+    <span>
+        <page-entity-icon
+            class="mr-2.5 inline-block -translate-y-0.5 text-2xl"
+            [icon]="(isLoading$ | async) ? PageEntityState.LOADING : entity.entityType"
+        >
+        </page-entity-icon>
+    </span>
+
+    <span
+        class="title | inline-block min-w-[2rem] cursor-text outline-none"
+        [innerText]="entityTitle$ | async"
+        [class.show-placeholder]="!(entityTitleDomState$ | async)"
+        [attr.data-placeholder]="ENTITY_TITLE_DEFAULTS[entity.entityType]"
+        #editableEntityTitle
+        contenteditable
+        focusable
+        #entityTitleFocusable="focusable"
+        [spellcheck]="entityTitleFocusable.isFocused"
+        (textChanges)="entityTitleChanges$.next($event)"
+        [mutationOptions]="{ plainOnly: true, observe: entityTitleFocusable.isFocused }"
+        (keydown)="keydownEvents$.next($event)"
+        (blur)="blurEvents$.next($event)"
+        data-test-name="editable-entity-name"
+    ></span>
+</div>

client-v2/src/app/components/molecules/editable-entity-heading/editable-entity-name.component.spec.ts → client-v2/src/app/components/molecules/editable-entity-heading/editable-entity-title.component.spec.ts

@@ -2,19 +2,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FocusableDirective } from 'src/app/directives/focusable.directive'
 import { actionsMock, storeMock } from 'src/app/utils/unit-test.mocks'
 
-import { EditableEntityNameComponent } from './editable-entity-name.component'
+import { EditableEntityTitleComponent } from './editable-entity-title.component'
 
 describe('EditableEntityHeadingComponent', () => {
-    let component: EditableEntityNameComponent
-    let fixture: ComponentFixture<EditableEntityNameComponent>
+    let component: EditableEntityTitleComponent
+    let fixture: ComponentFixture<EditableEntityTitleComponent>
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [EditableEntityNameComponent, FocusableDirective],
+            declarations: [EditableEntityTitleComponent, FocusableDirective],
             providers: [storeMock, actionsMock],
         }).compileComponents()
 
-        fixture = TestBed.createComponent(EditableEntityNameComponent)
+        fixture = TestBed.createComponent(EditableEntityTitleComponent)
         component = fixture.componentInstance
         fixture.detectChanges()
     })

client-v2/src/app/components/molecules/editable-entity-heading/editable-entity-name.component.ts → client-v2/src/app/components/molecules/editable-entity-heading/editable-entity-title.component.ts

@@ -12,90 +12,92 @@ import {
     first,
     map,
     merge,
+    of,
     shareReplay,
     switchMap,
     tap,
 } from 'rxjs'
-import { ENTITY_NAME_DEFAULTS } from 'src/app/models/defaults'
-import { EntityPreviewRecursive, EntityType } from 'src/app/models/entities.model'
+import { ENTITY_TITLE_DEFAULTS } from 'src/app/shared/defaults'
+import { EntityPreviewRecursive, EntityType } from 'src/app/fullstack-shared-models/entities.model'
 import { AppState } from 'src/app/store'
 import { entitiesActions } from 'src/app/store/entities/entities.actions'
 import { getLoadingUpdates } from 'src/app/utils/store.helpers'
 import { PageEntityState } from '../../atoms/icons/page-entity-icon/page-entity-icon.component'
 
 @UntilDestroy()
 @Component({
-    selector: 'app-editable-entity-name',
-    templateUrl: './editable-entity-name.component.html',
-    styleUrls: ['./editable-entity-name.component.css'],
+    selector: 'app-editable-entity-title',
+    templateUrl: './editable-entity-title.component.html',
+    styleUrls: ['./editable-entity-title.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EditableEntityNameComponent {
+export class EditableEntityTitleComponent {
     constructor(private store: Store<AppState>, private actions$: Actions) {}
 
     EntityType = EntityType
     PageEntityState = PageEntityState
-    ENTITY_NAME_DEFAULTS = ENTITY_NAME_DEFAULTS
+    ENTITY_TITLE_DEFAULTS = ENTITY_TITLE_DEFAULTS
 
-    @ViewChild('editableEntityName') editableEntityName!: ElementRef<HTMLSpanElement>
+    @ViewChild('editableEntityTitle') editableEntityTitle!: ElementRef<HTMLSpanElement>
 
     @Input() set entity(activeEntity: EntityPreviewRecursive | undefined | null) {
         this.entity$.next(activeEntity)
     }
     entity$ = new BehaviorSubject<EntityPreviewRecursive | undefined | null>(null)
 
-    entityName$ = this.entity$.pipe(
-        filter(entity => entity?.name != this.lastSentStoreUpdate),
+    entityTitle$ = this.entity$.pipe(
+        filter(entity => entity?.title != this.lastSentStoreUpdate),
         tap(() => (this.lastSentStoreUpdate = null)),
         map(entity => {
-            if (entity?.name == ENTITY_NAME_DEFAULTS[EntityType.TASKLIST]) return '' // @TODO: Remove hardcoded value
+            if (!entity) return null
+            if (entity.title == ENTITY_TITLE_DEFAULTS[entity.entityType]) return ''
 
-            return entity?.name
+            return entity.title
         }),
-        distinctUntilChanged((prev, currEntityName) => {
-            if (prev === '' && currEntityName === '') return false
+        distinctUntilChanged((prev, currEntityTitle) => {
+            if (prev === '' && currEntityTitle === '') return false
 
-            return currEntityName == prev
+            return currEntityTitle == prev
         }),
-        switchMap(entityName => {
-            return this.entityNameChanges$.pipe(
+        switchMap(entityTitle => {
+            return this.entityTitleChanges$.pipe(
                 first(),
-                filter(newEntityName => {
-                    if (!newEntityName) return true
+                filter(newEntityTitle => {
+                    if (!newEntityTitle) return true
 
-                    return entityName != newEntityName
+                    return entityTitle != newEntityTitle
                 }),
-                map(() => entityName)
+                map(() => entityTitle)
             )
         }),
-        tap(entityName => {
-            /*  This is necessary in case of updating the entityname from empty to also empty.
-                Because apparently, angular does not do the update, which is bad when the entityname was edited before,
-                meaning, the edited entityname won't be overwritten. So we have to do that manually.
+        tap(entityTitle => {
+            /*  This is necessary in case of updating the entity title from empty to also empty.
+                Because apparently, angular does not do the update, which is bad when the entity title was edited before,
+                meaning, the edited entity title won't be overwritten. So we have to do that manually.
 
-                We could narrow this down even further with comparing to the previous entityname (`pairwise()` operator),
+                We could narrow this down even further with comparing to the previous entity title (`pairwise()` operator),
                 and only update if both are empty, but this should suffice for now. */
-            if (entityName === '' && this.editableEntityName?.nativeElement) {
-                this.editableEntityName.nativeElement.innerText = ''
+            if (entityTitle === '' && this.editableEntityTitle?.nativeElement) {
+                this.editableEntityTitle.nativeElement.innerText = ''
             }
         }),
         shareReplay({ bufferSize: 1, refCount: true })
     )
 
     keydownEvents$ = new BehaviorSubject<KeyboardEvent | null>(null)
     blurEvents$ = new BehaviorSubject<FocusEvent | null>(null)
-    entityNameChanges$ = new BehaviorSubject<string | null>(null)
+    entityTitleChanges$ = new BehaviorSubject<string | null>(null)
 
-    entityNameDomState$ = merge(
-        this.entityNameChanges$,
-        this.entityName$.pipe(
+    entityTitleDomState$ = merge(
+        this.entityTitleChanges$,
+        this.entityTitle$.pipe(
             tap(() => {
-                if (this.entityNameChanges$.value !== null) this.entityNameChanges$.next(null)
+                if (this.entityTitleChanges$.value !== null) this.entityTitleChanges$.next(null)
             })
         )
     ).pipe(shareReplay({ bufferSize: 1, refCount: true }))
 
-    entityNameUpdateEvents$ = merge(
+    entityTitleUpdateEvents$ = merge(
         this.keydownEvents$.pipe(
             filter(event => {
                 if (event?.code == 'Enter') {
@@ -104,38 +106,44 @@ export class EditableEntityNameComponent {
                 }
                 return false
             }),
-            switchMap(() => this.entityNameChanges$.pipe(first()))
+            switchMap(() => this.entityTitleChanges$.pipe(first()))
         ),
         this.blurEvents$.pipe(
             filter(e => !!e),
-            switchMap(() => this.entityNameChanges$.pipe(first()))
+            switchMap(() => this.entityTitleChanges$.pipe(first()))
         ),
-        this.entityNameChanges$.pipe(debounceTime(600))
+        this.entityTitleChanges$.pipe(debounceTime(600))
     ).pipe(
-        map(newEntityName => {
-            if (newEntityName === null) return null
+        switchMap(newEntityTitle => {
+            if (newEntityTitle === null) return of(null)
 
-            return newEntityName || ENTITY_NAME_DEFAULTS[EntityType.TASKLIST] // @TODO: Remove hardcoded value
+            return this.entity$.pipe(
+                first(),
+                map(entity => {
+                    if (!entity) return null
+                    return newEntityTitle || ENTITY_TITLE_DEFAULTS[entity.entityType]
+                })
+            )
         }),
         shareReplay({ bufferSize: 1, refCount: true })
     )
 
-    entityNameUpdatesSubscription = this.entityNameUpdateEvents$
+    entityTitleUpdatesSubscription = this.entityTitleUpdateEvents$
         .pipe(
             distinctUntilChanged(),
-            switchMap(newName => {
+            switchMap(title => {
                 return combineLatest([this.entity$, this.isLoading$]).pipe(
                     first(),
                     tap(([entity, isLoading]) => {
-                        if (!entity || !newName) return
+                        if (!entity || !title) return
 
-                        const action = entitiesActions.rename({ id: entity.id, newName })
+                        const action = entitiesActions.rename({ id: entity.id, entityType: entity.entityType, title })
                         if (isLoading) {
                             this.updateQueue$.next(action)
                             return
                         }
 
-                        this.lastSentStoreUpdate = newName
+                        this.lastSentStoreUpdate = title
                         this.store.dispatch(action)
                     })
                 )
@@ -165,7 +173,7 @@ export class EditableEntityNameComponent {
             map(queuedAction => {
                 if (queuedAction === null) return
 
-                this.lastSentStoreUpdate = queuedAction.newName
+                this.lastSentStoreUpdate = queuedAction.title
                 this.store.dispatch(queuedAction)
                 this.updateQueue$.next(null)
             }),

client-v2/src/app/components/organisms/entity-view/entity-view.component.html

@@ -22,9 +22,10 @@
 
             <ng-template #options>
                 <app-drop-down
+                    *ngIf="entity$ | async as entity"
                     [items]="(entityOptionsItems$ | async) || []"
                     [rootTrigger]="trigger"
-                    [data]="(entity$ | async)?.id"
+                    [data]="{ id: entity.id, entityType: entity.entityType }"
                 ></app-drop-down>
             </ng-template>
         </div>

client-v2/src/app/components/organisms/entity-view/entity-view.component.test.ts

@@ -1,12 +1,12 @@
 import { CdkMenuModule } from '@angular/cdk/menu'
 import { Injector } from '@angular/core'
 import { BehaviorSubject } from 'rxjs'
-import { EntityPreviewRecursive } from 'src/app/models/entities.model'
-import { TasklistDetail } from 'src/app/models/list.model'
+import { EntityPreviewRecursive, EntityType } from 'src/app/fullstack-shared-models/entities.model'
+import { TasklistDetail } from 'src/app/fullstack-shared-models/list.model'
 import { storeMock } from 'src/app/utils/unit-test.mocks'
 import { EntityPageLabelComponent } from '../../atoms/entity-page-label/entity-page-label.component'
 import { DropDownComponent } from '../../molecules/drop-down/drop-down.component'
-import { EditableEntityNameComponent } from '../../molecules/editable-entity-heading/editable-entity-name.component'
+import { EditableEntityTitleComponent } from '../../molecules/editable-entity-heading/editable-entity-title.component'
 import { EntityViewComponent, entityViewComponentMap } from './entity-view.component'
 import { TasklistViewComponent } from './views/tasklist-view/tasklist-view.component'
 
@@ -27,7 +27,7 @@ const setupComponent = (template = defaultTemplate) => {
         declarations: [
             EntityViewComponent,
             ...entityViewComponents,
-            EditableEntityNameComponent,
+            EditableEntityTitleComponent,
             EntityPageLabelComponent,
             DropDownComponent,
         ],
@@ -44,9 +44,10 @@ const setupComponent = (template = defaultTemplate) => {
 
 const entityFixture: EntityPreviewRecursive = {
     id: 'the mock id',
-    name: 'The mock name',
+    entityType: EntityType.TASKLIST,
+    title: 'The mock name',
     children: [],
-    parentListId: '',
+    parentId: '',
 }
 const entityDetailFixture: TasklistDetail = { description: null, createdAt: '', ownerId: '' }