refactor(account-feature-shell): melhora usabilidade no form de habilidades

Author: guiseek

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

@@ -9,7 +9,9 @@
     <devmx-account-skills />
 
     <footer>
-      <button mat-flat-button>Salvar</button>
+      <button mat-flat-button [disabled]="state()">
+        {{state() ? state() : 'Salvar'}}
+      </button>
     </footer>
   </section>
 

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

@@ -2,6 +2,7 @@ import { SelectFileComponent } from '@devmx/shared-ui-global/image';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ProfileComponent } from './profile/profile.component';
 import { ContactComponent } from './contact/contact.component';
+import { debounceTime, filter, skip, take, timer } from 'rxjs';
 import { SkillsComponent } from './skills/skills.component';
 import { SocialComponent } from './social/social.component';
 import { UserPhoto, provideUserPhoto } from '../../dialogs';
@@ -11,7 +12,6 @@ import { UpdatePhoto } from '@devmx/account-data-access';
 import { UserComponent } from './user/user.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { UserForm } from '../../forms/user';
-import { filter, take } from 'rxjs';
 import {
   inject,
   signal,
@@ -24,7 +24,6 @@ import {
   AuthenticationFacade,
 } from '@devmx/account-data-access';
 
-
 @Component({
   selector: 'devmx-account',
   templateUrl: './account.container.html',
@@ -53,6 +52,10 @@ export class AccountContainer {
 
   photo = signal('');
 
+  state = signal<string | null>(null);
+
+  i = 0;
+
   constructor() {
     this.userFacade.selected$
       .pipe(
@@ -65,6 +68,8 @@ export class AccountContainer {
         }
 
         this.form.patch(user);
+
+        console.log((this.i += 1));
       });
 
     this.authFacade.auth$
@@ -73,6 +78,10 @@ export class AccountContainer {
         takeUntilDestroyed()
       )
       .subscribe((auth) => this.userFacade.loadOne(auth.id));
+
+    this.form.valueChanges
+      .pipe(takeUntilDestroyed(), debounceTime(4000), skip(1))
+      .subscribe(() => this.onSubmit());
   }
 
   changePhoto(file: File) {
@@ -88,11 +97,17 @@ export class AccountContainer {
   }
 
   onSubmit() {
+    const timer$ = timer(1000).pipe(take(1));
+
     if (this.form.valid) {
       const value = this.form.getRawValue() as UpdateUser;
-      return this.userFacade.update(value);
+      this.state.set('Salvando...');
+      this.userFacade.update(value);
+
+      return timer$.subscribe(() => this.state.set(null));
     }
 
-    return this.form.markAllAsTouched();
+    this.form.markAllAsTouched();
+    return timer$.subscribe(() => this.state.set(null));
   }
 }

packages/account/feature-shell/src/lib/containers/account/skills/skills.component.html

@@ -1,45 +1,38 @@
-<div formArrayName="skills">
-  <ol class="skill-list" cdkDropList (cdkDropListDropped)="drop($event)">
-    @for (item of form.skills.controls; track item.value.skill?.id; let index =
-    $index) {
-    <li cdkDrag [cdkDragData]="item" [formGroupName]="index">
-      <devmx-icon name="drag/handle" cdkDragHandle />
-
-      <div>
-        <div>
-          {{ item.value.skill?.name }}
-        </div>
-
-        <mat-slider
-          min="0"
-          max="100"
-          step="10"
-          discrete
-          color="primary"
-          showTickMarks
-          [displayWith]="formatLabel"
-        >
-          <input matSliderThumb formControlName="weight" />
-        </mat-slider>
-      </div>
+<mat-accordion
+  hideToggle
+  cdkDropList
+  class="skills-list"
+  formArrayName="skills"
+  (cdkDropListDropped)="drop($event)"
+>
+  @for (item of form.skills.controls; track item.value.skill?.id; let index =
+  $index) {
+  <mat-expansion-panel
+    cdkDrag
+    class="skill-item"
+    [cdkDragData]="item"
+    [formGroupName]="index"
+  >
+    <mat-expansion-panel-header>
+      <mat-panel-title> {{ item.value.skill?.name }} </mat-panel-title>
+      <mat-panel-description> {{ item.value.weight }}% </mat-panel-description>
+      <devmx-icon name="drag/indicator" cdkDragHandle />
+    </mat-expansion-panel-header>
 
-      <strong> {{ item.value.weight }}% </strong>
-    </li>
-    }
-  </ol>
-</div>
+    <div>
+      <mat-slider
+        min="0"
+        max="100"
+        step="10"
+        discrete
+        showTickMarks
+        [displayWith]="formatLabel"
+      >
+        <input matSliderThumb formControlName="weight" />
+      </mat-slider>
+    </div>
+  </mat-expansion-panel>
+  }
+</mat-accordion>
 
-<mat-form-field>
-  <mat-label>Adicionar habilidade</mat-label>
-  <input matInput [formControl]="searchControl" [matAutocomplete]="auto" />
-  <mat-autocomplete
-    #auto="matAutocomplete"
-    [displayWith]="displayFn"
-    (optionSelected)="onOptionSelected($event.option.value)"
-  >
-    @if (skillFacade.response$ | async; as response) { @for (option of
-    response.data; track option.id) {
-    <mat-option [value]="option">{{ option.name }}</mat-option>
-    } }
-  </mat-autocomplete>
-</mat-form-field>
+<devmx-search-skill (selected)="onNewSkill($event)" />

packages/account/feature-shell/src/lib/containers/account/skills/skills.component.scss

@@ -1,59 +1,20 @@
 :host {
+  gap: 1em;
   display: flex;
   flex-direction: column;
 
-  .skill-list {
-    padding: 0;
-
-    gap: 1em;
-    display: flex;
-    flex-direction: column;
-
-    devmx-icon {
-      cursor: grab;
-
-      &:active {
-        cursor: grabbing;
-      }
-    }
-
-    li {
-      gap: 1.2em;
-      display: flex;
-      align-items: center;
-
-      & > div {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        div {
-          padding-left: 0.5em;
-        }
-      }
-    }
+  .cdk-drag-preview {
+    border: none;
+    box-sizing: border-box;
   }
 
   .skills-list {
-    width: 500px;
-    max-width: 100%;
-    overflow: hidden;
-
-
-    li {
-      min-height: 3em;
-      box-sizing: border-box;
-      cursor: move;
+    div {
+      display: flex;
+      flex-direction: column;
     }
   }
 
-  .cdk-drag-preview {
-    border: none;
-    box-sizing: border-box;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  }
-
   .cdk-drag-placeholder {
     opacity: 0;
   }
@@ -62,7 +23,22 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 
-  .skills-list.cdk-drop-list-dragging .skills-list li:not(.cdk-drag-placeholder) {
+  .skills-list.cdk-drop-list-dragging
+    .skills-list
+    .skill-item:not(.cdk-drag-placeholder) {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 }
+
+.mat-accordion .mat-expansion-panel:first-of-type {
+  border-top-right-radius: none;
+  border-top-left-radius: none;
+}
+
+.mat-accordion .mat-expansion-panel:not([class*='mat-elevation-z']) {
+  box-shadow: none;
+}
+
+.mat-accordion .mat-expansion-panel {
+  background: transparent;
+}

packages/account/feature-shell/src/lib/containers/account/skills/skills.component.ts

@@ -1,28 +1,16 @@
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { inject, Component, ChangeDetectorRef } from '@angular/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SearchSkillComponent } from '@devmx/learn-ui-shared';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSliderModule } from '@angular/material/slider';
 import { UserForm, UserSkillForm } from '../../../forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
 import { SkillFacade } from '@devmx/learn-data-access';
 import { Skill } from '@devmx/shared-api-interfaces';
-import { debounceTime, filter } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
-import {
-  FormControl,
-  ControlContainer,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { IconComponent } from '@devmx/shared-ui-global/icon';
-import {
-  CdkDragDrop,
-  DragDropModule,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'devmx-account-skills',
@@ -35,17 +23,15 @@ import {
     },
   ],
   imports: [
-    MatAutocompleteModule,
     MatProgressBarModule,
+    SearchSkillComponent,
     ReactiveFormsModule,
-    MatFormFieldModule,
+    MatExpansionModule,
     MatButtonModule,
-    MatSliderModule,
     DragDropModule,
-    MatInputModule,
-    MatListModule,
+    MatCardModule,
     IconComponent,
-    AsyncPipe,
+    MatSliderModule,
   ],
 })
 export class SkillsComponent {
@@ -59,29 +45,8 @@ export class SkillsComponent {
     return this.container.control as UserForm;
   }
 
-  searchControl = new FormControl<string | Skill>('');
-
-  constructor() {
-    this.searchControl.valueChanges
-      .pipe(
-        filter((value) => typeof value === 'string'),
-        filter((value) => value.length > 1),
-        takeUntilDestroyed(),
-        debounceTime(600)
-      )
-      .subscribe((name) => {
-        this.skillFacade.setFilter({ name });
-        this.skillFacade.load();
-      });
-  }
-
-  displayFn(skill: Skill) {
-    return skill && skill.name ? skill.name : '';
-  }
-
-  onOptionSelected(skill: Skill) {
+  onNewSkill(skill: Skill) {
     this.form.skills.add({ skill, weight: 0 });
-    this.searchControl.setValue('');
   }
 
   formatLabel(value: number) {

packages/learn/ui-shared/src/index.ts

@@ -1,2 +1,3 @@
+export * from './lib/components';
 export * from './lib/dialogs';
 export * from './lib/forms';

packages/learn/ui-shared/src/lib/components/index.ts

@@ -0,0 +1 @@
+export * from './search-skill/search-skill.component';

packages/learn/ui-shared/src/lib/components/search-skill/search-skill.component.html

@@ -0,0 +1,17 @@
+<mat-form-field>
+  <mat-label>{{ label() }}</mat-label>
+  <input matInput [formControl]="control" [matAutocomplete]="auto" />
+  <mat-autocomplete
+    #auto="matAutocomplete"
+    [displayWith]="displayFn"
+    (optionSelected)="onOptionSelected($event.option.value)"
+  >
+    @if (skillFacade.response$ | async; as response) {
+    <!--  -->
+    @for (option of response.data; track option.id) {
+    <mat-option [value]="option">{{ option.name }}</mat-option>
+    }
+    <!--  -->
+    }
+  </mat-autocomplete>
+</mat-form-field>

packages/learn/ui-shared/src/lib/components/search-skill/search-skill.component.scss

@@ -0,0 +1,5 @@
+:host {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}