From a6a31226163b87ff184362a0c2954e485723bb98 Mon Sep 17 00:00:00 2001
From: Gui Seek <guiseek@gmail.com>
Date: Fri, 6 Dec 2024 17:29:46 -0300
Subject: [PATCH] =?UTF-8?q?refactor(account):=20reorganiza=20formul=C3=A1r?=
 =?UTF-8?q?io=20sobre=20o=20usu=C3=A1rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/account/account.container.html | 18 ++++++-
 .../containers/account/account.container.ts   |  8 +++
 .../account/profile/profile.component.html    | 13 -----
 .../account/profile/profile.component.ts      |  8 ---
 .../account/skills/skills.component.html      |  2 +-
 .../account/skills/skills.component.scss      |  4 ++
 .../account/skills/skills.component.ts        | 16 +++---
 packages/shared/ui-global/button/src/index.ts |  1 +
 .../external-link/external-link.directive.ts  | 52 +++++++++++++++++++
 .../markdown-editor.component.html            |  1 +
 .../markdown-editor.component.ts              |  9 ++++
 .../markdown-view.component.scss              | 39 ++++++++++++++
 12 files changed, 139 insertions(+), 32 deletions(-)
 create mode 100644 packages/shared/ui-global/button/src/lib/external-link/external-link.directive.ts

diff --git a/packages/account/feature-shell/src/lib/containers/account/account.container.html b/packages/account/feature-shell/src/lib/containers/account/account.container.html
index f124b5e5..1bbf1810 100644
--- a/packages/account/feature-shell/src/lib/containers/account/account.container.html
+++ b/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'}}
diff --git a/packages/account/feature-shell/src/lib/containers/account/account.container.ts b/packages/account/feature-shell/src/lib/containers/account/account.container.ts
index 022aac19..55b86072 100644
--- a/packages/account/feature-shell/src/lib/containers/account/account.container.ts
+++ b/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,
diff --git a/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.html b/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.html
index 544e777a..e4ac28a1 100644
--- a/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.html
+++ b/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>
diff --git a/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.ts b/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.ts
index c08c8fa4..c75c8917 100644
--- a/packages/account/feature-shell/src/lib/containers/account/profile/profile.component.ts
+++ b/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,
diff --git a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.html b/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.html
index f2437a8f..bcb4d16c 100644
--- a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.html
+++ b/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>
 
diff --git a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.scss b/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.scss
index fcd3dac2..a27e4582 100644
--- a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.scss
+++ b/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;
   }
diff --git a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.ts b/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.ts
index c0951d40..15bd9637 100644
--- a/packages/account/feature-shell/src/lib/containers/account/skills/skills.component.ts
+++ b/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',
diff --git a/packages/shared/ui-global/button/src/index.ts b/packages/shared/ui-global/button/src/index.ts
index 312d16ea..8dcd4219 100644
--- a/packages/shared/ui-global/button/src/index.ts
+++ b/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';
diff --git a/packages/shared/ui-global/button/src/lib/external-link/external-link.directive.ts b/packages/shared/ui-global/button/src/lib/external-link/external-link.directive.ts
new file mode 100644
index 00000000..edef96bf
--- /dev/null
+++ b/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';
+    }
+  }
+}
diff --git a/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.html b/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.html
index 07888804..da34d2bb 100644
--- a/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.html
+++ b/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()"
diff --git a/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.ts b/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.ts
index 78079953..374943ae 100644
--- a/packages/shared/ui-global/markdown/src/lib/components/mardown-editor/markdown-editor.component.ts
+++ b/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('');
diff --git a/packages/shared/ui-global/markdown/src/lib/components/markdown-view/markdown-view.component.scss b/packages/shared/ui-global/markdown/src/lib/components/markdown-view/markdown-view.component.scss
index 5c6b2830..53154de6 100644
--- a/packages/shared/ui-global/markdown/src/lib/components/markdown-view/markdown-view.component.scss
+++ b/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;
+  }
+}