feat: add menu items link active directive (#8)

app/project.json

@@ -42,19 +42,12 @@
           ]
         },
         "staging": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all",
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true,
           "fileReplacements": [
             {
               "replace": "app/src/envs/env.ts",
@@ -97,9 +90,12 @@
         },
         "development": {
           "browserTarget": "app:build:development"
+        },
+        "staging": {
+          "browserTarget": "app:build:staging"
         }
       },
-      "defaultConfiguration": "development",
+      "defaultConfiguration": "staging",
       "options": {
         "proxyConfig": "app/proxy.conf.json"
       }

app/src/app/app.component.ts

@@ -39,8 +39,8 @@ import {
 
         <button
           mat-button
-          routerLink="/content"
-          routerLinkActive="active"
+          menuItemsLinkActive="active"
+          menuItemsBaseLink="/content"
           [matMenuTriggerFor]="contentMenu"
         >
           Conteúdo
@@ -68,13 +68,12 @@ import {
 
         <!--  -->
 
-        <a routerLink="/account" routerLinkActive="active" mat-button>
-          Contas
-        </a>
-
-        <!--  -->
-
-        <button mat-icon-button [matMenuTriggerFor]="beforeMenu">
+        <button
+          mat-icon-button
+          menuItemsLinkActive="active"
+          menuItemsBaseLink="/account"
+          [matMenuTriggerFor]="beforeMenu"
+        >
           <mat-icon>account_circle</mat-icon>
         </button>
         <mat-menu #beforeMenu="matMenu" xPosition="before">

app/src/app/app.module.ts

@@ -26,15 +26,17 @@ import {AppInterceptor} from './app.interceptor'
 import {AppComponent} from './app.component'
 import {appRoutes} from './app.routes'
 import {env} from '../envs/env'
+import {UiBaseModule} from '@dev/shared-ui-base'
 
 registerLocaleData(pt, 'pt-BR', BR)
 
 @NgModule({
   declarations: [AppComponent, LoaderComponent],
   imports: [
+    UiBaseModule,
+    LayoutModule,
     BrowserModule,
     HttpClientModule,
-    LayoutModule,
     MatDividerModule,
     MatSidenavModule,
     MatMenuModule,

app/src/envs/env.staging.ts

@@ -1,9 +1,9 @@
 export const env = {
   production: true,
   api: {
-    content: 'http://localhost:3000/content',
-    account: 'http://localhost:3000/account',
-    learning: 'http://localhost:3000/learning',
-    book: 'http://localhost:3000/content/books',
+    content: 'http://localhost:3000/api/content',
+    account: 'http://localhost:3000/api/account',
+    learning: 'http://localhost:3000/api/learning',
+    book: 'http://localhost:3000/api/content/books',
   },
 }

content/resource/src/lib/content-resource.module.ts

@@ -1,18 +1,26 @@
+import {ContentBookController} from './content-book.controller'
 import {DynamicModule, Module} from '@nestjs/common'
 import {ContentResourceController} from './content-resource.controller'
 import {
+  provideBookFacade,
   provideContentFacade,
+  provideBookRepository,
   provideContentRepository,
 } from '@dev/content-data-source'
 
 @Module({
-  controllers: [ContentResourceController],
+  controllers: [ContentBookController, ContentResourceController],
 })
 export class ContentResourceModule {
   static register(): DynamicModule {
     return {
       module: ContentResourceModule,
-      providers: [provideContentRepository(), provideContentFacade()],
+      providers: [
+        provideContentRepository(),
+        provideBookRepository(),
+        provideContentFacade(),
+        provideBookFacade(),
+      ],
       exports: [provideContentFacade()],
     }
   }

shared/ui-base/src/lib/directives/index.ts

@@ -0,0 +1 @@
+export * from './menu-items-link-active.directive'

shared/ui-base/src/lib/directives/menu-items-link-active.directive.ts

@@ -0,0 +1,38 @@
+import {Input, Directive, DestroyRef, ElementRef} from '@angular/core'
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop'
+import {NavigationEnd, Router} from '@angular/router'
+import {filter} from 'rxjs'
+
+@Directive({
+  selector: '[devMenuLinkActive],[menuItemsLinkActive]',
+})
+export class MenuItemsLinkActiveDirective {
+  @Input({required: true})
+  menuItemsBaseLink = ''
+
+  @Input({required: true})
+  menuItemsLinkActive = 'active'
+
+  constructor(
+    router: Router,
+    destroyRef: DestroyRef,
+    elementRef: ElementRef<HTMLButtonElement>
+  ) {
+    router.events
+      .pipe(
+        filter((e) => e instanceof NavigationEnd),
+        takeUntilDestroyed(destroyRef)
+      )
+      .subscribe(() => {
+        if (router.url.startsWith(this.menuItemsBaseLink)) {
+          elementRef.nativeElement.classList.add(
+            this.menuItemsLinkActive ?? 'active'
+          )
+        } else {
+          elementRef.nativeElement.classList.remove(
+            this.menuItemsLinkActive ?? 'active'
+          )
+        }
+      })
+  }
+}

shared/ui-base/src/lib/ui-base.module.ts

@@ -1,13 +1,21 @@
 import {NgModule} from '@angular/core'
 import {CommonModule} from '@angular/common'
+import {RouterModule} from '@angular/router'
 import {MatButtonModule} from '@angular/material/button'
 import {MatMenuModule} from '@angular/material/menu'
 import {MatIconModule} from '@angular/material/icon'
 import {SelectionMenuComponent} from './components'
+import {MenuItemsLinkActiveDirective} from './directives'
 
 @NgModule({
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule],
-  declarations: [SelectionMenuComponent],
-  exports: [SelectionMenuComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+  ],
+  declarations: [SelectionMenuComponent, MenuItemsLinkActiveDirective],
+  exports: [SelectionMenuComponent, MenuItemsLinkActiveDirective],
 })
 export class UiBaseModule {}

tools/plugin/layer/src/generators/data-access/files/lib/infrastructure/__fileName__.service.mock.ts.template

@@ -1,12 +1,12 @@
 import {<%=className%>, <%=className%>Service} from '<%= domain %>'
 import {MockService} from '@dev/shared-data-access'
-import {Observable, of} from 'rxjs'
+import {of} from 'rxjs'
 
 export class <%=className%>ServiceMock
   extends MockService<<%=className%>>
   implements <%=className%>Service
 {
-  create(value: Partial<<%=className%>>): Observable<<%=className%>> {
+  create(value: Partial<<%=className%>>) {
     const entity = {
       ...value,
       id: crypto.randomUUID(),

tools/plugin/layer/src/generators/entity/files/data-access/lib/infrastructure/__fileName__.service.mock.ts.template

@@ -1,12 +1,12 @@
 import {<%=className%>, <%=className%>Service} from '<%= domain %>'
 import {MockService} from '@dev/shared-data-access'
-import {Observable, of} from 'rxjs'
+import {of} from 'rxjs'
 
 export class <%=className%>ServiceMock
   extends MockService<<%=className%>>
   implements <%=className%>Service
 {
-  create(value: Partial<<%=className%>>): Observable<<%=className%>> {
+  create(value: Partial<<%=className%>>) {
     const entity = {
       ...value,
       id: crypto.randomUUID(),