refactor: move antigas dependencies fora do entry-point forms em ui-global

Author: guiseek

packages/account/feature-admin/src/lib/containers/event/event.container.ts

@@ -1,4 +1,4 @@
-import { AccountRefForm, PresentationRefForm } from '@devmx/shared-ui-global';
+import { AccountRefForm, PresentationRefForm } from '@devmx/shared-ui-global/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { provideNativeDateAdapter } from '@angular/material/core';

packages/account/feature-admin/src/lib/forms/change-roles.ts

@@ -1,7 +1,7 @@
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ChangeRoles } from '@devmx/account-data-access';
 import { AccountRole } from '@devmx/shared-api-interfaces';
-import { TypedForm } from '@devmx/shared-ui-global';
+import { TypedForm } from '@devmx/shared-ui-global/forms';
 
 export class ChangeRolesForm extends FormGroup<TypedForm<ChangeRoles>> {
   constructor() {

packages/account/feature-admin/src/lib/forms/create-event.ts

@@ -1,6 +1,6 @@
 import { CreateEvent, EventFormat } from '@devmx/shared-api-interfaces';
+import { FormOption, TypedForm } from '@devmx/shared-ui-global/forms';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { FormOption, TypedForm } from '@devmx/shared-ui-global';
 
 export class CreateEventForm extends FormGroup<TypedForm<CreateEvent>> {
   formats: FormOption<EventFormat | ''>[] = [

packages/account/feature-admin/src/lib/forms/event.ts

@@ -4,7 +4,7 @@ import {
   FormOption,
   AccountRefForm,
   PresentationRefForm,
-} from '@devmx/shared-ui-global';
+} from '@devmx/shared-ui-global/forms';
 import {
   Event,
   AccountRef,

packages/account/feature-admin/src/lib/forms/filter-account.ts

@@ -1,6 +1,6 @@
 import { FilterAccount } from '@devmx/account-data-access';
+import { TypedForm } from '@devmx/shared-ui-global/forms';
 import { FormControl, FormGroup } from '@angular/forms';
-import { TypedForm } from '@devmx/shared-ui-global';
 
 export class FilterAccountForm extends FormGroup<TypedForm<FilterAccount>> {
   constructor() {

packages/account/feature-admin/src/lib/forms/filter-presentation.ts

@@ -1,7 +1,7 @@
+import { FormOption, TypedForm } from '@devmx/shared-ui-global/forms';
+import { PresentationFormat } from '@devmx/shared-api-interfaces';
 import { FilterPresentation } from '@devmx/account-data-access';
 import { FormControl, FormGroup } from '@angular/forms';
-import { FormOption, TypedForm } from '@devmx/shared-ui-global';
-import { PresentationFormat } from '@devmx/shared-api-interfaces';
 
 export class FilterPresentationForm extends FormGroup<
   TypedForm<FilterPresentation>

packages/account/feature-admin/src/lib/forms/roles.ts

@@ -1,6 +1,6 @@
-import { FormControl, FormGroup } from '@angular/forms';
 import { AccountRole } from '@devmx/shared-api-interfaces';
-import { TypedForm } from '@devmx/shared-ui-global';
+import { TypedForm } from '@devmx/shared-ui-global/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 export class RolesForm extends FormGroup<TypedForm<AccountRole>> {
   constructor() {

packages/account/feature-auth/src/lib/forms/sign-in.ts

@@ -1,6 +1,6 @@
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { TypedForm } from '@devmx/shared-ui-global/forms';
 import { SignIn } from '@devmx/shared-api-interfaces';
-import { TypedForm } from '@devmx/shared-ui-global';
 import { BehaviorSubject } from 'rxjs';
 
 export class SignInForm extends FormGroup<TypedForm<SignIn>> {

packages/account/feature-auth/src/lib/forms/sign-up.ts

@@ -1,5 +1,5 @@
+import { FormOption, TypedForm } from '@devmx/shared-ui-global/forms';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { FormOption, TypedForm } from '@devmx/shared-ui-global';
 import { Gender, SignUp } from '@devmx/shared-api-interfaces';
 import { signal } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';

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

@@ -4,6 +4,7 @@ import { provideAutocompleteCitiesService } from '@devmx/location-ui-forms';
 import { AuthFacade, provideAccount } from '@devmx/account-data-access';
 import { providePresentation } from '@devmx/presentation-data-access';
 import { roleGroupsGuard, roleGroupGuard, roleGuard } from './guards';
+import { provideFormDialog } from '@devmx/shared-ui-global/forms';
 import { provideLocation } from '@devmx/location-data-access';
 import { provideEvent } from '@devmx/event-data-access';
 import { SidenavLeftOutlet } from './outlets';
@@ -36,6 +37,7 @@ export const accountFeatureShellRoutes: Route[] = [
       provideAutocompleteCitiesService(),
       provideLayoutToolbar(AuthFacade),
       provideLayoutSidenav(accountFeatureShellSidenav),
+      provideFormDialog()
     ],
     component: AccountFeatureShellComponent,
     children: [

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

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (submit)="onSubmit()">
+<!-- <form [formGroup]="form" (submit)="onSubmit()"> -->
   <section formGroupName="name">
     <mat-form-field>
       <mat-label>Nome</mat-label>
@@ -96,4 +96,4 @@
       </button>
     </div>
   </footer>
-</form>
+<!-- </form> -->

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

@@ -1,24 +1,18 @@
 :host {
   flex: 2;
+  gap: 1.2em;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  // margin: 0.6em;
 
-  form {
+  section {
     display: flex;
-    flex-direction: column;
     gap: 1.2em;
 
-    section {
-      display: flex;
-      gap: 1.2em;
-
-      align-items: center;
+    align-items: center;
 
-      & > * {
-        flex: 1;
-      }
+    & > * {
+      flex: 1;
     }
 
     footer {

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

@@ -8,13 +8,14 @@ import { MatSelectModule } from '@angular/material/select';
 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 { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 import { UpdateAccountForm, UpdateAccountWithCity } from '../../forms';
 import {
   output,
   OnInit,
   Component,
   ChangeDetectionStrategy,
+  inject,
 } from '@angular/core';
 
 @Component({
@@ -24,6 +25,12 @@ import {
   styleUrl: './editable-account.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [provideNativeDateAdapter()],
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useFactory: () => inject(ControlContainer, { skipSelf: true }),
+    },
+  ],
   imports: [
     ReactiveFormsModule,
     AutocompleteCitiesComponent,
@@ -38,6 +45,12 @@ import {
   standalone: true,
 })
 export class EditableAccountComponent implements OnInit {
+  container = inject(ControlContainer);
+
+  get formGroup() {
+    return this.container.control as UpdateAccountForm;
+  }
+
   form = new UpdateAccountForm();
 
   submitted = output<UpdateAccount | UpdateAccountWithCity>();

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

@@ -23,10 +23,12 @@
           </button>
         </div>
       </aside>
-      <devmx-editable-account
-        #accountComponent="devmxEditableAccount"
-        (submitted)="onAccountSubmitted($event)"
-      />
+      <form [formGroup]="form.updateAccount">
+        <devmx-editable-account
+          #accountComponent="devmxEditableAccount"
+          (submitted)="onAccountSubmitted($event)"
+        />
+      </form>
     </div>
   </mat-expansion-panel>
 
@@ -84,3 +86,31 @@
     </div>
   </mat-expansion-panel>
 </mat-accordion>
+
+@if (accountFacade.account$ | async; as account) {
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Conta</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <button
+      type="button"
+      mat-raised-button
+      (click)="openUpdateAccount(account)"
+    >
+      Alterar dados da conta
+    </button>
+  </mat-card-content>
+
+  <mat-card-header>
+    <mat-card-title>Segurança</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <button type="button" mat-raised-button (click)="openPassword(account)">
+      Alterar senha
+    </button>
+  </mat-card-content>
+</mat-card>
+}

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

@@ -2,8 +2,9 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  // align-items: center;
   margin-top: 2em;
+  gap: 2em;
 
   .settings-panel {
     width: 48em;

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

@@ -1,15 +1,23 @@
+import { FormService, createFormGroup } from '@devmx/shared-ui-global/forms';
 import { ImageComponent, PhotoComponent } from '@devmx/shared-ui-global';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { AutoAssignable, UpdateAccountWithCity } from '../../forms';
 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 { CityFacade } from '@devmx/location-data-access';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCardModule } from '@angular/material/card';
+import { ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { switchMap, take } from 'rxjs';
+import {
+  AutoAssignable,
+  changePassword,
+  updateAccount,
+  UpdateAccountForm,
+  UpdateAccountWithCity,
+} from '../../forms';
 import {
   AutocompleteCitiesComponent,
   AutocompleteCitiesService,
@@ -41,6 +49,7 @@ import {
   styleUrl: './settings.container.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    ReactiveFormsModule,
     CommonModule,
     MatCardModule,
     MatIconModule,
@@ -68,8 +77,14 @@ export class SettingsContainer implements OnInit {
 
   destroyRef = inject(DestroyRef);
 
+  formService = inject(FormService);
+
   dialog = inject(MatDialog);
 
+  form = {
+    updateAccount: new UpdateAccountForm(),
+  };
+
   editableAccountChild = viewChild(EditableAccountComponent);
   get editableAccount() {
     return this.editableAccountChild();
@@ -123,7 +138,7 @@ export class SettingsContainer implements OnInit {
 
   populate(account: AccountOut) {
     if (this.editableAccount) {
-      this.editableAccount.form.patchValue(account);
+      this.form.updateAccount.patchValue(account);
     }
     if (this.editablePassword) {
       this.editablePassword.form.patchValue(account);
@@ -139,6 +154,39 @@ export class SettingsContainer implements OnInit {
     });
   }
 
+  openPassword(account: AccountOut) {
+    const title = 'Alterar senha';
+
+    const fields = changePassword(account);
+    const form = createFormGroup<ChangePassword>(fields);
+
+    const password$ = this.formService
+      .open<ChangePassword>({ title, form, fields })
+      .afterClosed();
+    password$.pipe(take(1)).subscribe((result) => {
+      console.log(result);
+    });
+  }
+
+  openUpdateAccount(account: AccountOut) {
+    const title = 'Alterar dados da conta';
+
+    const fields = updateAccount(account);
+    console.log(fields);
+
+    const form = createFormGroup(fields);
+    console.log(form);
+
+
+    const account$ = this.formService
+      .open({ title, fields, form })
+      .afterClosed();
+
+    // account$.pipe(take(1)).subscribe((result) => {
+    //   console.log(result);
+    // });
+  }
+
   onAccountSubmitted(data: UpdateAccount | UpdateAccountWithCity) {
     if (data.city && typeof data.city === 'object') {
       data.city = data.city.id;
@@ -147,7 +195,7 @@ export class SettingsContainer implements OnInit {
   }
 
   onPasswordSubmitted(data: ChangePassword) {
-    this.accountFacade.changePassword(data);
+    // this.accountFacade.changePassword(data);
   }
 
   onRolesSubmitted(data: AutoAssignable) {

packages/account/feature-shell/src/lib/forms/auto-assignable-role.ts

@@ -1,6 +1,6 @@
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { AutoAssignableRole } from '@devmx/shared-api-interfaces';
-import { Form } from '@devmx/shared-ui-global';
+import { Form } from '@devmx/shared-ui-global/forms';
 
 export interface AutoAssignable {
   id: string;

packages/account/feature-shell/src/lib/forms/create-presentation.ts

@@ -1,5 +1,5 @@
 import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
-import { FormOption, TypedForm } from '@devmx/shared-ui-global';
+import { FormOption, TypedForm } from '@devmx/shared-ui-global/forms';
 import {
   CreatePresentation,
   PresentationFormat,

packages/account/feature-shell/src/lib/forms/fields/change-password.ts

@@ -0,0 +1,38 @@
+import { textbox, TypedFields } from '@devmx/shared-ui-global/forms';
+import { ChangePassword } from '@devmx/account-data-access';
+import { AccountOut } from '@devmx/shared-api-interfaces';
+
+export const changePassword = (account: Pick<AccountOut, 'id' | 'username'>): TypedFields<ChangePassword> => ({
+  id: textbox({
+    label: 'Id',
+    type: 'hidden',
+    value: account.id,
+  }),
+
+  username: textbox({
+    label: 'Usuário',
+    type: 'hidden',
+    value: account.username,
+    errors: {
+      required: 'Obrigatório',
+    },
+  }),
+
+  currentPassword: textbox({
+    label: 'Senha atual',
+    type: 'password',
+    autocomplete: 'current-password',
+    errors: {
+      required: 'Obrigatório',
+    },
+  }),
+
+  newPassword: textbox({
+    label: 'Nova senha',
+    type: 'password',
+    autocomplete: 'new-password',
+    errors: {
+      required: 'Obrigatório',
+    },
+  }),
+});

packages/account/feature-shell/src/lib/forms/fields/index.ts

@@ -0,0 +1,2 @@
+export * from './change-password';
+export * from './update-account';