refactor(account): reorganiza formulário sobre o usuário

Author: guiseek

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

@@ -6,14 +6,28 @@
 
     <devmx-account-profile />
 
-    <devmx-account-skills />
-
     <fieldset>
       <legend>Informações públicas</legend>
 
       <devmx-account-visibility />
     </fieldset>
 
+    <devmx-account-skills />
+
+    <section formGroupName="profile">
+      <devmx-markdown-toolbar>
+        <devmx-markdown-editor
+          label="Bio"
+          #editor="markdownEditor"
+          formControlName="minibio"
+          [maxRows]="80"
+        />
+        <devmx-markdown-view
+          [content]="form.profile.controls.minibio?.value ?? ''"
+        />
+      </devmx-markdown-toolbar>
+    </section>
+
     <footer>
       <button mat-flat-button [disabled]="state()">
         {{state() ? state() : 'Salvar'}}

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

@@ -15,6 +15,11 @@ import { UserComponent } from './user/user.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { UserForm } from '../../forms/user';
+import {
+  MarkdownEditorComponent,
+  MarkdownToolbarComponent,
+  MarkdownViewComponent,
+} from '@devmx/shared-ui-global/markdown';
 import {
   inject,
   signal,
@@ -30,6 +35,9 @@ import {
   providers: [provideUserPhoto()],
   imports: [
     ReactiveFormsModule,
+    MarkdownToolbarComponent,
+    MarkdownEditorComponent,
+    MarkdownViewComponent,
     UserComponent,
     ProfileComponent,
     ContactComponent,

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

@@ -27,17 +27,4 @@
       <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
   </div>
-
-  <devmx-markdown-toolbar>
-    <devmx-markdown-editor
-      label="Bio"
-      #editor="markdownEditor"
-      formControlName="minibio"
-      [maxRows]="40"
-      [minRows]="40"
-    />
-    <devmx-markdown-view
-      [content]="form.profile.controls.minibio?.value ?? ''"
-    />
-  </devmx-markdown-toolbar>
 </div>

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

@@ -7,11 +7,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { provideUserPhoto } from '../../../dialogs';
 import { UserForm } from '../../../forms';
-import {
-  MarkdownEditorComponent,
-  MarkdownToolbarComponent,
-  MarkdownViewComponent,
-} from '@devmx/shared-ui-global/markdown';
 
 @Component({
   selector: 'devmx-account-profile',
@@ -26,9 +21,6 @@ import {
   ],
   providers: [provideNativeDateAdapter(), provideUserPhoto()],
   imports: [
-    MarkdownToolbarComponent,
-    MarkdownEditorComponent,
-    MarkdownViewComponent,
     ReactiveFormsModule,
     MatDatepickerModule,
     MatFormFieldModule,

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

@@ -16,7 +16,7 @@
     <mat-expansion-panel-header>
       <div *cdkDragPlaceholder></div>
       <mat-panel-title> {{ item.value.skill?.name }} </mat-panel-title>
-      <mat-panel-description> {{ item.value.weight }}% </mat-panel-description>
+      <mat-panel-description class="skill-weight"> {{ item.value.weight }}% </mat-panel-description>
       <devmx-icon name="drag/indicator" cdkDragHandle />
     </mat-expansion-panel-header>
 

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

@@ -15,6 +15,10 @@
     }
   }
 
+  .skill-weight {
+    max-width: 3em;
+  }
+
   .cdk-drag-placeholder {
     opacity: 0;
   }

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

@@ -1,20 +1,20 @@
 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 { MatExpansionModule } from '@angular/material/expansion';
 import { SearchSkillComponent } from '@devmx/learn-ui-shared';
+import { IconComponent } from '@devmx/shared-ui-global/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSliderModule } from '@angular/material/slider';
 import { UserForm, UserSkillForm } from '../../../forms';
 import { SkillFacade } from '@devmx/learn-data-access';
-import { Skill } from '@devmx/shared-api-interfaces';
 import { MatCardModule } from '@angular/material/card';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { IconComponent } from '@devmx/shared-ui-global/icon';
+import { Skill } from '@devmx/shared-api-interfaces';
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'devmx-account-skills',

packages/shared/ui-global/button/src/index.ts

@@ -2,5 +2,6 @@ export * from './lib/auto-save-button/auto-save-button.component';
 export * from './lib/whats-app-button/whats-app-button.component';
 export * from './lib/calendar-button/calendar-button.component';
 export * from './lib/youtube-button/youtube-button.component';
+export * from './lib/external-link/external-link.directive';
 export * from './lib/heart-button/heart-button.component';
 export * from './lib/maps-button/maps-button.component';

packages/shared/ui-global/button/src/lib/external-link/external-link.directive.ts

@@ -0,0 +1,52 @@
+import { isPlatformBrowser } from '@angular/common';
+import { InjectionToken } from '@angular/core';
+import {
+  OnInit,
+  inject,
+  Directive,
+  PLATFORM_ID,
+  HostAttributeToken,
+} from '@angular/core';
+
+export const WINDOW = new InjectionToken<Window>('WINDOW');
+
+export function windowProvider(document: Document) {
+  return document.defaultView;
+}
+
+export function isExternalLink(link: string): boolean {
+  return link.startsWith('http://') || link.startsWith('https://');
+}
+
+@Directive({
+  selector: `[devmxExternalLink],a[href]:not([noBlankForExternalLink])`,
+  host: { '[attr.target]': 'target', '[attr.rel]': 'rel' },
+})
+export class ExternalLinkDirective implements OnInit {
+  #platformId = inject(PLATFORM_ID);
+
+  target: '_blank' | '_self' | '_parent' | '_top' | '' = '';
+
+  href = inject(new HostAttributeToken('href'), { optional: false });
+
+  rel: 'noopener noreferrer' | '' = '';
+
+  ngOnInit() {
+    if (!this.href) {
+      throw new Error(`Este elemento não é um link`);
+    }
+
+    this.#setAnchorTarget();
+  }
+
+  #setAnchorTarget() {
+    if (!isPlatformBrowser(this.#platformId)) {
+      return;
+    }
+
+    if (isExternalLink(this.href)) {
+      this.rel = 'noopener noreferrer';
+      this.target = '_blank';
+    }
+  }
+}

packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.html

@@ -5,6 +5,7 @@
     #textareaRef
     cdkTextareaAutosize
     [formControl]="control"
+    [autofocus]="hasAutofocus"
     #autosize="cdkTextareaAutosize"
     [cdkAutosizeMinRows]="minRows()"
     [cdkAutosizeMaxRows]="maxRows()"

packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.ts

@@ -41,6 +41,15 @@ export class MarkdownEditorComponent extends DefaultValueAccessor {
     return ref ? ref.nativeElement : null;
   }
 
+  autofocus = input<boolean | ''>(false);
+
+  get hasAutofocus() {
+    const value = this.autofocus();
+    return value === true || value === '';
+  }
+
+  resize = input(true);
+
   label = input('');
 
   hint = input('');

packages/shared/ui-global/markdown/src/lib/components/markdown-view/markdown-view.component.scss

@@ -21,3 +21,42 @@
     white-space: pre-wrap;
   }
 }
+
+:root .mat-typography .markdown-view {
+  & > h1,
+  & > h2,
+  & > h3,
+  & > h4,
+  & > h5,
+  & > h6 {
+    font-weight: 600;
+    margin: 1em 0 0;
+  }
+
+  & > h1 {
+    font-size: 1.7em;
+  }
+  & > h2 {
+    font-size: 1.6em;
+  }
+  & > h3 {
+    font-size: 1.5em;
+  }
+  & > h4 {
+    font-size: 1.4em;
+  }
+  & > h5 {
+    font-size: 1.3em;
+  }
+  & > h6 {
+    font-size: 1.2em;
+  }
+
+  p {
+    padding: 1em 0 0;
+  }
+
+  ul + p {
+    margin-top: 1em;
+  }
+}