feat: autocomplete cities (#6)

Author: guiseek

diagrams/account/dep-graph.svg

@@ -14,9 +14,9 @@
     "@angular-devkit/build-angular": "~18.2.0",
     "@angular-devkit/core": "~18.2.0",
     "@angular-devkit/schematics": "~18.2.0",
-    "@angular-eslint/eslint-plugin": "^18.0.1",
-    "@angular-eslint/eslint-plugin-template": "^18.0.1",
-    "@angular-eslint/template-parser": "^18.0.1",
+    "@angular-eslint/eslint-plugin": "^18.3.0",
+    "@angular-eslint/eslint-plugin-template": "^18.3.0",
+    "@angular-eslint/template-parser": "^18.3.0",
     "@angular/cli": "~18.2.0",
     "@angular/compiler-cli": "~18.2.0",
     "@angular/language-service": "~18.2.0",
@@ -99,5 +99,11 @@
       "path": "node_modules/cz-git",
       "czConfig": "./config/cz.config.js"
     }
+  },
+  "pnpm": {
+    "overrides": {
+      "path-to-regexp@>=0.2.0 <1.9.0": ">=1.9.0",
+      "rollup@>=4.0.0 <4.22.4": ">=4.22.4"
+    }
   }
 }

package.json

@@ -0,0 +1 @@
+![Account Dep Graph](../../diagrams/account/dep-graph.svg)

packages/account/README.md

@@ -22,6 +22,7 @@ export class AccountsServiceImpl implements AccountsService {
       .find(where)
       .skip(skip)
       .limit(size)
+      .populate('city')
       .exec();
 
     const data = accounts.map((item) => item.toJSON());
@@ -32,31 +33,29 @@ export class AccountsServiceImpl implements AccountsService {
   }
 
   async findOne(id: string) {
-    const account = await this.accountModel.findById(id).exec();
-
-    if (!account) {
-      throw `Conta não encontrada`;
-    }
-
-    return account.toJSON();
+    const account = await this.accountModel
+      .findById(id)
+      .populate('city')
+      .exec();
+    return account ? account.toJSON() : null;
   }
 
   async findOneBy(filter: FindFilterDto<Account>) {
-    const account = await this.accountModel.findOne(filter).exec();
+    const account = await this.accountModel
+      .findOne(filter)
+      .populate('city')
+      .exec();
 
     return account ? account.toJSON() : null;
   }
 
   async update(id: string, data: Partial<UpdateAccountDto>) {
     const account = await this.accountModel
       .findOneAndUpdate({ _id: id }, data)
+      .populate('city')
       .exec();
 
-    if (!account) {
-      throw `Problema ao alterar conta`;
-    }
-
-    return account.toJSON();
+    return account ? account.toJSON() : null;
   }
 
   async remove(id: string) {

packages/account/data-source/src/lib/services/accounts.impl.ts

@@ -1,5 +1,7 @@
 import { AccountFeatureShellComponent } from './account-feature-shell.component';
+import { provideAutocompleteCitiesService } from '@devmx/location-ui-forms';
 import { providePresentation } from '@devmx/presentation-data-access';
+import { provideLocations } from '@devmx/location-data-access';
 import { roleGroupsGuard, roleGroupGuard } from './guards';
 import { Route } from '@angular/router';
 import {
@@ -25,6 +27,8 @@ export const accountFeatureShellRoutes: Route[] = [
     providers: [
       ...provideAccount(),
       ...providePresentation(),
+      ...provideLocations(),
+      provideAutocompleteCitiesService(),
       provideAccountNavFacade([
         {
           path: ['/account', 'settings'],

packages/account/feature-shell/src/lib/account-feature-shell.routes.ts

@@ -81,6 +81,8 @@
     </mat-form-field>
   </section>
 
+  <devmx-autocomplete-cities formControlName="city" />
+
   <footer>
     <div class="flex gap-1">
       <button type="button" mat-stroked-button (click)="toggleForm(firstName)">

packages/account/feature-shell/src/lib/components/editable-account/editable-account.component.html

@@ -1,3 +1,4 @@
+import { AutocompleteCitiesComponent } from '@devmx/location-ui-forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,7 +9,7 @@ import { UpdateAccount } from '@devmx/account-data-access';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { ReactiveFormsModule } from '@angular/forms';
-import { UpdateAccountForm } from '../../forms';
+import { UpdateAccountForm, UpdateAccountWithCity } from '../../forms';
 import {
   output,
   OnInit,
@@ -24,6 +25,7 @@ import {
   providers: [provideNativeDateAdapter()],
   imports: [
     ReactiveFormsModule,
+    AutocompleteCitiesComponent,
     MatDatepickerModule,
     MatFormFieldModule,
     MatCheckboxModule,
@@ -37,7 +39,7 @@ import {
 export class EditableAccountComponent implements OnInit {
   form = new UpdateAccountForm();
 
-  submitted = output<UpdateAccount>();
+  submitted = output<UpdateAccount | UpdateAccountWithCity>();
 
   ngOnInit() {
     this.form.disable();

packages/account/feature-shell/src/lib/components/editable-account/editable-account.component.ts

@@ -66,3 +66,6 @@
     </div>
   </mat-expansion-panel>
 </mat-accordion>
+
+
+<!-- <devmx-autocomplete-cities /> -->

packages/account/feature-shell/src/lib/containers/settings/settings.container.html

@@ -1,13 +1,19 @@
 import { ImageComponent, PhotoComponent } from '@devmx/shared-ui-global';
+import {
+  AutocompleteCitiesComponent,
+  AutocompleteCitiesService,
+} from '@devmx/location-ui-forms';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { AccountOut } from '@devmx/shared-api-interfaces';
+
 import { MatIconModule } from '@angular/material/icon';
 import { MatCardModule } from '@angular/material/card';
 import { CommonModule } from '@angular/common';
-import { take } from 'rxjs';
+import { AutoAssignable, UpdateAccountWithCity } from '../../forms';
+import { switchMap, take } from 'rxjs';
 import {
   AuthFacade,
   AccountFacade,
@@ -28,7 +34,7 @@ import {
   DestroyRef,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import { AutoAssignable } from '../../forms';
+import { CityFacade } from '@devmx/location-data-access';
 
 @Component({
   selector: 'devmx-account-settings',
@@ -47,14 +53,20 @@ import { AutoAssignable } from '../../forms';
     EditableAccountComponent,
     EditablePasswordComponent,
     AutoAssignableRoleComponent,
+    AutocompleteCitiesComponent,
   ],
+  providers: [],
   standalone: true,
 })
 export class SettingsContainer implements OnInit {
   authFacade = inject(AuthFacade);
 
   accountFacade = inject(AccountFacade);
 
+  autocompleteCitiesService = inject(AutocompleteCitiesService);
+
+  cityFacade = inject(CityFacade);
+
   destroyRef = inject(DestroyRef);
 
   dialog = inject(MatDialog);
@@ -94,6 +106,20 @@ export class SettingsContainer implements OnInit {
       });
 
     this.authFacade.loadAuthUser();
+
+    this.autocompleteCitiesService.search$
+      .pipe(
+        switchMap((name) => {
+          console.log(name);
+
+          return name ? this.cityFacade.search(name) : [];
+        })
+      )
+      .subscribe((cities) => {
+        console.log(cities);
+
+        this.autocompleteCitiesService.setCities(cities);
+      });
   }
 
   populate(account: AccountOut) {
@@ -114,8 +140,11 @@ export class SettingsContainer implements OnInit {
     });
   }
 
-  onAccountSubmitted(data: UpdateAccount) {
-    this.accountFacade.update(data);
+  onAccountSubmitted(data: UpdateAccount | UpdateAccountWithCity) {
+    if (data.city && typeof data.city === 'object') {
+      data.city = data.city.id;
+    }
+    this.accountFacade.update(data as UpdateAccount);
   }
 
   onPasswordSubmitted(data: ChangePassword) {

packages/account/feature-shell/src/lib/containers/settings/settings.container.ts

@@ -1,7 +1,11 @@
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { UpdateAccount } from '@devmx/account-data-access';
 import { Form, FormOption } from '@devmx/shared-ui-global';
-import { Gender } from '@devmx/shared-api-interfaces';
+import { City, Gender } from '@devmx/shared-api-interfaces';
+
+export interface UpdateAccountWithCity extends Omit<UpdateAccount, 'city'> {
+  city: City;
+}
 
 export class UpdateAccountForm extends Form<UpdateAccount> {
   genders: FormOption<Gender>[] = [

packages/account/feature-shell/src/lib/forms/update-account.ts

@@ -0,0 +1,30 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

packages/location/data-access/.eslintrc.json

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'location-data-access',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/packages/location/data-access',
+  passWithNoTests: true
+};

packages/location/data-access/jest.config.ts

@@ -0,0 +1,15 @@
+{
+  "name": "@devmx/location-data-access",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@devmx/location-domain": "0.0.1",
+    "@devmx/shared-api-interfaces": "0.0.1",
+    "@devmx/shared-data-access": "0.0.1",
+    "@devmx/shared-util-data": "0.0.1"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts",
+  "private": true
+}

packages/location/data-access/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "location-data-access",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/location/data-access/src",
+  "projectType": "library",
+  "tags": ["type:data"],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/location/data-access",
+        "main": "packages/location/data-access/src/index.ts",
+        "tsConfig": "packages/location/data-access/tsconfig.lib.json",
+        "assets": []
+      }
+    }
+  }
+}

packages/location/data-access/project.json

@@ -0,0 +1,2 @@
+export * from './lib/location-providers';
+export * from './lib/facades';

packages/location/data-access/src/index.ts

@@ -0,0 +1,34 @@
+import { LocationFilter } from '@devmx/location-domain';
+import {
+  SearchCitiesUseCase,
+  FindCitiesByLocationUseCase,
+} from '@devmx/location-domain/client';
+import { City, Page } from '@devmx/shared-api-interfaces';
+import { State } from '@devmx/shared-data-access';
+
+interface CityState {
+  cities: Page<City>;
+  result: City[]
+  city: City | null;
+}
+
+export class CityFacade extends State<CityState> {
+  constructor(
+    private findCitiesByLocationUseCase: FindCitiesByLocationUseCase,
+    private searchCitiesUseCase: SearchCitiesUseCase
+  ) {
+    super({
+      cities: { data: [], items: 0, pages: 0 },
+      result: [],
+      city: null,
+    });
+  }
+
+  findByLocation(filter: LocationFilter) {
+    return this.findCitiesByLocationUseCase.execute(filter);
+  }
+
+  search(name: string) {
+    return this.searchCitiesUseCase.execute(name);
+  }
+}

packages/location/data-access/src/lib/facades/city.ts

@@ -0,0 +1 @@
+export * from './city';

packages/location/data-access/src/lib/facades/index.ts

@@ -0,0 +1,17 @@
+import {
+  createCityFacade,
+  provideCityService,
+  provideFindCitiesByLocationUseCase,
+  provideSearchCitiesUseCase,
+} from './providers';
+
+export function provideLocations() {
+  return [
+    provideCityService(),
+
+    provideFindCitiesByLocationUseCase(),
+    provideSearchCitiesUseCase(),
+
+    createCityFacade(),
+  ];
+}

packages/location/data-access/src/lib/location-providers.ts

@@ -0,0 +1,18 @@
+import { CityFacade } from '../facades';
+import {
+  SearchCitiesUseCase,
+  FindCitiesByLocationUseCase,
+} from '@devmx/location-domain/client';
+
+export function createCityFacade() {
+  return {
+    provide: CityFacade,
+    useFactory(
+      findCitiesByLocation: FindCitiesByLocationUseCase,
+      searchCities: SearchCitiesUseCase
+    ) {
+      return new CityFacade(findCitiesByLocation, searchCities);
+    },
+    deps: [FindCitiesByLocationUseCase, SearchCitiesUseCase],
+  };
+}

packages/location/data-access/src/lib/providers/facades.ts

@@ -0,0 +1,3 @@
+export * from './facades';
+export * from './services';
+export * from './use-cases';