Integrate entity features

client-v2/angular.json

@@ -1,5 +1,12 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "schematics": {
+      "@schematics/angular": {
+        "component": {
+          "changeDetection": "OnPush"
+        }
+      }
+    },
     "version": 1,
     "newProjectRoot": "projects",
     "projects": {

client-v2/package.json

@@ -3,7 +3,7 @@
     "version": "2.0.0",
     "scripts": {
         "dev": "ng serve",
-        "dev:lan": "ng serve --host 0.0.0.0",
+        "dev:lan": "echo \"Listening on http://$(ipconfig getifaddr en0):4200\" && NG_APP_SERVER_BASE_URL=http://$(ipconfig getifaddr en0):3000 ng serve --host 0.0.0.0",
         "build": "ng build",
         "watch": "ng build --watch --configuration development",
         "update-colors": "ts-node ./tools/update-colors.cts",
@@ -34,6 +34,7 @@
         "@angular/router": "^14.2.12",
         "@ngneat/hot-toast": "^4.1.0",
         "@ngneat/overview": "^3.0.0",
+        "@ngneat/until-destroy": "^9.2.2",
         "@ngrx/effects": "^14.3.2",
         "@ngrx/store": "^14.3.2",
         "@ngrx/store-devtools": "^14.3.2",

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

@@ -1,24 +1,35 @@
-import { NgModule } from '@angular/core'
+import { inject, NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+import { Store } from '@ngrx/store'
+import { environment } from '../environments/environment'
 import { AuthGuard } from './guards/auth.guard'
 import { AuthComponent } from './pages/auth/auth.component'
 import { LoginLoadingComponent } from './pages/auth/login-loading/login-loading.component'
 import { LoginComponent } from './pages/auth/login/login.component'
 import { SignupComponent } from './pages/auth/signup/signup.component'
 import { ComponentPlaygroundComponent } from './pages/component-playground/component-playground.component'
+import { DashboardComponent } from './pages/home/dashboard/dashboard.component'
+import { EntityPageComponent } from './pages/home/entity-page/entity-page.component'
 import { HomeComponent } from './pages/home/home.component'
 import { LandingPageComponent } from './pages/landing-page/landing-page.component'
 import { NotFoundPageComponent } from './pages/not-found-page/not-found-page.component'
 import { SettingsAccountComponent } from './pages/settings/account/account.component'
 import { SettingsAppearanceComponent } from './pages/settings/appearance/appearance.component'
 import { SettingsGeneralComponent } from './pages/settings/general/general.component'
 import { SettingsComponent } from './pages/settings/settings.component'
+import { AppState } from './store'
+import { getEntityById } from './store/entities/utils'
+
+const ENVIRONMENT_HINT = `[${environment.REVIEW_ID ? environment.REVIEW_ID + '-' : ''}${environment.CONTEXT}]`
+const APP_TITLE = `Rockket ${environment.CONTEXT == 'Production' ? '' : ENVIRONMENT_HINT}`
+const APP_TITLE_SUFFIX = `- ${APP_TITLE}`
 
 const routes: Routes = [
     {
         path: '',
         component: LandingPageComponent,
         pathMatch: 'full',
+        title: APP_TITLE,
     },
     {
         path: 'auth',
@@ -27,14 +38,17 @@ const routes: Routes = [
             {
                 path: 'login',
                 component: LoginComponent,
+                title: `Login ${APP_TITLE_SUFFIX}`,
             },
             {
                 path: 'signup',
                 component: SignupComponent,
+                title: `Signup ${APP_TITLE_SUFFIX}`,
             },
             {
                 path: 'login-loading',
                 component: LoginLoadingComponent,
+                title: `Confirming Login... ${APP_TITLE_SUFFIX}`,
             },
             {
                 path: '',
@@ -47,6 +61,19 @@ const routes: Routes = [
         path: 'home',
         component: HomeComponent,
         canActivate: [AuthGuard],
+        children: [
+            {
+                path: ':id',
+                component: EntityPageComponent,
+                title: route =>
+                    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
+                    }),
+            },
+            { path: '', component: DashboardComponent, title: `Dashboard ${APP_TITLE_SUFFIX}` },
+        ],
     },
     {
         path: 'settings',
@@ -58,18 +85,24 @@ const routes: Routes = [
                 pathMatch: 'full',
                 redirectTo: 'general',
             },
-            { path: 'general', component: SettingsGeneralComponent },
-            { path: 'account', component: SettingsAccountComponent },
-            { path: 'appearance', component: SettingsAppearanceComponent },
+            { path: 'general', component: SettingsGeneralComponent, title: `General Settings ${APP_TITLE_SUFFIX}` },
+            { path: 'account', component: SettingsAccountComponent, title: `Account Settings ${APP_TITLE_SUFFIX}` },
+            {
+                path: 'appearance',
+                component: SettingsAppearanceComponent,
+                title: `Appearance Settings ${APP_TITLE_SUFFIX}`,
+            },
         ],
     },
     {
         path: 'playground',
         component: ComponentPlaygroundComponent,
+        title: `Component Playground ${APP_TITLE_SUFFIX}`,
     },
     {
         path: '**',
         component: NotFoundPageComponent,
+        title: `404 Not Found ${APP_TITLE_SUFFIX}`,
     },
 ]
 

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

@@ -39,6 +39,17 @@ import { IconsModule } from './components/atoms/icons/icons.module'
 import { OverlayModule } from '@angular/cdk/overlay'
 import { TooltipDirective } from './directives/tooltip.directive'
 import { TooltipComponent } from './components/atoms/tooltip/tooltip.component'
+import { CdkTreeModule } from '@angular/cdk/tree'
+import { EntityPageLabelComponent } from './components/atoms/entity-page-label/entity-page-label.component'
+import { EntityPageComponent } from './pages/home/entity-page/entity-page.component'
+import { BreadcrumbsComponent } from './components/molecules/breadcrumbs/breadcrumbs.component'
+import { MainPaneComponent } from './components/templates/main-pane/main-pane.component'
+import { MutationDirective } from './directives/mutation.directive'
+import { MenuToggleComponent } from './components/templates/sidebar-layout/menu-toggle/menu-toggle.component'
+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'
 
 @NgModule({
     declarations: [
@@ -67,6 +78,16 @@ import { TooltipComponent } from './components/atoms/tooltip/tooltip.component'
         DropDownComponent,
         TooltipDirective,
         TooltipComponent,
+        EntityPageLabelComponent,
+        EntityPageComponent,
+        BreadcrumbsComponent,
+        MainPaneComponent,
+        MutationDirective,
+        MenuToggleComponent,
+        DashboardComponent,
+        EntityViewComponent,
+        TasklistViewComponent,
+        EditableEntityNameComponent,
     ],
     imports: [
         BrowserModule,
@@ -104,6 +125,7 @@ import { TooltipComponent } from './components/atoms/tooltip/tooltip.component'
         IconsModule,
         ModalModule,
         OverlayModule,
+        CdkTreeModule,
     ],
     providers: [],
     bootstrap: [AppComponent],

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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { PageEntityIconKey } from '../icons/page-entity-icon/page-entity-icon.component'
+
+@Component({
+    selector: 'app-entity-page-label',
+    template: `
+        <span class="inline-flex justify-center">
+            <page-entity-icon class="icon | mr-1 inline-block w-4 text-md" [icon]="pageIcon"></page-entity-icon>
+        </span>
+        <span class="title | truncate">{{ title }}</span>
+    `,
+    styles: [
+        `
+            :host {
+                @apply truncate;
+            }
+        `,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EntityPageLabelComponent {
+    @Input() title!: string
+    @Input() pageIcon!: PageEntityIconKey
+}

client-v2/src/app/components/atoms/icons/icons.module.ts

@@ -5,7 +5,6 @@ import { IconComponent } from './icon/icon.component'
 import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component'
 import { PageEntityIconComponent } from './page-entity-icon/page-entity-icon.component'
 import { PriorityIconComponent } from './priority-icon/priority-icon.component'
-import { StatusIconComponent } from './status-icon/status-icon.component'
 
 @NgModule({
     declarations: [
@@ -14,7 +13,6 @@ import { StatusIconComponent } from './status-icon/status-icon.component'
         LoadingSpinnerComponent,
         PageEntityIconComponent,
         PriorityIconComponent,
-        StatusIconComponent,
     ],
     imports: [CommonModule],
     exports: [
@@ -23,7 +21,6 @@ import { StatusIconComponent } from './status-icon/status-icon.component'
         LoadingSpinnerComponent,
         PageEntityIconComponent,
         PriorityIconComponent,
-        StatusIconComponent,
     ],
 })
 export class IconsModule {}

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

@@ -1,3 +1 @@
-<status-icon *ngIf="icon != 'tasklist'" [status]="icon"> </status-icon>
-
-<app-icon *ngIf="icon == 'tasklist'" iconClass="far fa-tasks text-tinted-300"></app-icon>
+<app-icon [iconClass]="entityIconClassMap[icon]"></app-icon>

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

@@ -1,13 +1,63 @@
-import { Component, Input } from '@angular/core'
-import { TaskDisplayState } from '../status-icon/status-icon.component'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { EntityType } from 'src/app/models/entities.model'
+import { TaskStatus } from 'src/app/models/task.model'
 
-export type PageEntityIconKey = TaskDisplayState | 'tasklist'
+/** This will come from the db */
+// export enum EntityType {
+//     TASKLIST = 'Tasklist',
+//     TASK = 'Task',
+//     DOCUMENT = 'Document',
+//     VIEW = 'View',
+// }
+
+export enum PageEntityState {
+    LOADING = 'Loading',
+}
+
+export enum TaskState {
+    BLOCKED = 'Blocked',
+    // LOADING = 'Loading',
+}
+export type TaskIconKey = TaskStatus | TaskState
+
+// const entityTypeWithoutTask = {
+//     [EntityType.TASKLIST]: 'Tasklist',
+//     [EntityType.DOCUMENT]: 'Document',
+//     [EntityType.VIEW]: 'View',
+// }
+// type EntityTypeWihoutTask = keyof typeof entityTypeWithoutTask
+export type PageEntityIconKey = TaskIconKey | EntityType | PageEntityState
+
+export const taskStatusIconClassMap: Record<TaskIconKey, string> = {
+    [TaskStatus.OPEN]: 'far fa-circle text-tinted-300',
+    [TaskStatus.IN_PROGRESS]: 'far fa-clock text-secondary-400',
+    [TaskStatus.BACKLOG]: 'fas fa-spinner text-tinted-300 rotate-[-45deg]',
+    [TaskStatus.COMPLETED]: 'fas fa-check-circle text-submit-400',
+    [TaskStatus.NOT_PLANNED]: 'fas fa-times-circle text-danger-400',
+    [TaskState.BLOCKED]: 'far fa-ban text-tinted-300',
+    // [TaskState.LOADING]: 'far fa-spinner-third animate-spin text-tinted-200',
+}
+
+export const entityIconClassMap: Record<PageEntityIconKey, string> = {
+    [EntityType.TASKLIST]: 'far fa-tasks text-tinted-400',
+    // [EntityType.DOCUMENT]: 'far fa-file-alt text-tinted-400',
+    // [EntityType.VIEW]: 'far fa-binoculars text-tinted-400',
+    [PageEntityState.LOADING]: 'far fa-spinner-third animate-spin text-tinted-200',
+    ...taskStatusIconClassMap,
+}
+
+export const isPageEntityIcon = (iconClass: string): iconClass is PageEntityIconKey => {
+    return iconClass in entityIconClassMap
+}
 
 @Component({
     selector: 'page-entity-icon',
     templateUrl: './page-entity-icon.component.html',
     styleUrls: ['./page-entity-icon.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageEntityIconComponent {
     @Input() icon!: PageEntityIconKey
+
+    entityIconClassMap = entityIconClassMap
 }