feat(account): adiciona configuração de informações públicas

Author: guiseek

apps/devmx/src/scss/component.scss

@@ -1,5 +1,6 @@
 @forward './components/stepper.theme';
 @forward './components/layout.theme';
 @forward './components/dialog.theme';
+@forward './components/links.theme';
 @forward './components/form.theme';
 @forward './components/fab.theme';

apps/devmx/src/scss/components/_links.theme.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+@mixin links-theme($theme) {
+  body {
+    a:link:not(.mdc-button):not(.mdc-icon-button):not(.mdc-fab),
+    a:active:not(.mdc-button):not(.mdc-icon-button):not(.mdc-fab),
+    a:visited:not(.mdc-button):not(.mdc-icon-button):not(.mdc-fab) {
+      color: mat.get-theme-color($theme, secondary, 70);
+    }
+
+    .mdc-icon-button:not(.mdc-fab):hover,
+    .mdc-icon-button:not(.mdc-fab):hover,
+    .mdc-icon-button:not(.mdc-fab):hover {
+      color: mat.get-theme-color($theme, secondary, 70);
+    }
+  }
+}

apps/devmx/src/styles.scss

@@ -16,6 +16,7 @@
   @include component.stepper-theme(theme.$light);
   @include component.layout-theme(theme.$light);
   @include component.dialog-theme(theme.$light);
+  @include component.links-theme(theme.$light);
   @include component.form-theme(theme.$light);
   @include component.fab-theme(theme.$light);
 

packages/account/data-access/src/lib/infrastructure/user.http.service.impl.ts

@@ -37,7 +37,7 @@ export class UserHttpServiceImpl
     form.append('photo', data.photo);
     form.append('gender', data.gender ?? '');
     form.append('minibio', data.minibio ?? '');
-    form.append('birthday', data.birthday ?? '');
+    form.append('birthday', data.birthday?.toString() ?? '');
 
     const url = [this.url, id, 'photo'];
 

packages/account/data-source/src/lib/dtos/update-profile.ts

@@ -22,7 +22,7 @@ export class UpdateProfileDto implements UpdateProfile {
 
   @IsOptional()
   @ApiPropertyOptional()
-  birthday?: string;
+  birthday?: Date;
 
   @IsOptional()
   @ApiPropertyOptional()

packages/account/data-source/src/lib/dtos/user-profile.ts

@@ -25,7 +25,7 @@ export class UserProfileDto implements UserProfile {
   minibio?: string;
 
   @ApiPropertyOptional()
-  birthday?: string;
+  birthday?: Date;
 
   @Type(() => CityDto)
   @ApiPropertyOptional({ type: () => [CityDto] })

packages/account/data-source/src/lib/schemas/user-profile.ts

@@ -27,8 +27,8 @@ export class UserProfileCollection implements UserProfile {
   @Prop({ default: '' })
   minibio?: string;
 
-  @Prop({ default: '' })
-  birthday?: string;
+  @Prop({ default: '', type: Date })
+  birthday?: Date;
 
   @Prop({
     type: mongoose.Schema.Types.ObjectId,

packages/account/data-source/src/lib/schemas/user.ts

@@ -2,13 +2,18 @@ import { UserPasswordCollection, UserPasswordSchema } from './user-password';
 import { UserContactCollection, UserContactSchema } from './user-contact';
 import { UserProfileCollection, UserProfileSchema } from './user-profile';
 import { UserSocialCollection, UserSocialSchema } from './user-social';
+import { DEFAULT_ROLES, DEFAULT_VISIBILITY } from '@devmx/shared-util-data';
 import { UserCodeCollection, UserCodeSchema } from './user-code';
-import { Roles, User, UserSkill } from '@devmx/shared-api-interfaces';
 import { createSchema } from '@devmx/shared-data-source';
-import { DEFAULT_ROLES } from '@devmx/shared-util-data';
 import { SkillSchema } from '@devmx/learn-data-source';
 import { Prop, raw, Schema } from '@nestjs/mongoose';
 import { Document } from 'mongoose';
+import {
+  User,
+  Roles,
+  UserSkill,
+  UserVisibility,
+} from '@devmx/shared-api-interfaces';
 
 @Schema()
 export class UserCollection extends Document implements User {
@@ -26,6 +31,13 @@ export class UserCollection extends Document implements User {
   @Prop({ required: true, type: Object, default: DEFAULT_ROLES })
   roles: Roles;
 
+  @Prop({
+    type: Object,
+    required: true,
+    default: DEFAULT_VISIBILITY,
+  })
+  visibility: UserVisibility;
+
   @Prop([
     {
       type: raw({

packages/account/feature-about/src/lib/containers/about-user/about-user.container.html

@@ -2,45 +2,84 @@
 <header>
   <h2>{{user.displayName}}</h2>
   <h3>{{'@' + user.name}}</h3>
-</header>
 
-@if (user.profile && user.profile.minibio) {
-<mat-card>
-  <mat-card-content>
-    <devmx-markdown [content]="user.profile.minibio" />
-  </mat-card-content>
-</mat-card>
-}
-<!--  -->
+  <div class="user-contact">
+    @if (user.contact.email && user.visibility?.email) {
+    <p>
+      <devmx-icon name="message/mail" />
+      <span>{{user.contact.email}}</span>
+    </p>
+    }
+    <!--  -->
+    @if (user.contact.phone && user.visibility?.phone) {
+    <p>
+      <devmx-icon name="tech/phone" />
+      <span>{{user.contact.phone}}</span>
+    </p>
+    }
+  </div>
+</header>
 
-@if (user.skills?.length) {
-<mat-card>
-  <mat-card-content>
-    <ol>
-      @for (item of user.skills; track item.skill.id) {
-      <li>
-        <p>{{item.skill.name}}</p>
-        <mat-progress-bar [value]="item.weight" />
-      </li>
-      }
-    </ol>
-  </mat-card-content>
-</mat-card>
+@if (user.visibility?.roles) {
+<div>
+  <mat-chip-set>
+    @for (role of user.roles | keyvalue; track role) {
+    <!--  -->
+    @if (role.value) {
+    <mat-chip>{{role.key | role}}</mat-chip>
+    }
+    <!--  -->
+    }
+  </mat-chip-set>
+</div>
 }
 
-<!--  -->
-}
+<section>
+  @if (user.profile && user.profile.minibio) {
+  <mat-card>
+    <mat-card-content>
+      <devmx-markdown [content]="user.profile.minibio" />
+    </mat-card-content>
+  </mat-card>
+  }
+  <!--  -->
 
+  @if (user.skills?.length && user.visibility?.skills) {
+  <mat-card>
+    <mat-card-content>
+      <ol>
+        @for (item of user.skills; track item.skill.id) {
+        <li>
+          <p>{{item.skill.name}}</p>
+          <mat-progress-bar [value]="item.weight" />
+        </li>
+        }
+      </ol>
+    </mat-card-content>
+  </mat-card>
+  }
+</section>
 <!--  -->
 
 <section>
+  @if (user.visibility?.events) {
+  <!--  -->
   @if (eventFacade.response$ | async; as response) {
   <devmx-event-card-list [data]="response.data" />
   }
+  <!--  -->
+  }
 
   <!--  -->
 
+  @if (user.visibility?.presentations) {
+  <!--  -->
   @if (presentationFacade.response$ | async; as response) {
   <devmx-presentation-card-list [data]="response.data" />
   }
+  <!--  -->
+  }
 </section>
+
+<!--  -->
+}

packages/account/feature-about/src/lib/containers/about-user/about-user.container.scss

@@ -8,8 +8,26 @@
 
   & > section {
     gap: 1em;
+    display: grid;
+    grid-auto-flow: dense;
+
+    grid-template-columns: repeat(2, 1fr);
+
+    @media (max-width: 1278px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
+  .user-contact {
+    gap: 2em;
     display: flex;
-    flex-direction: column;
+    flex-flow: row wrap;
+
+    p {
+      gap: 0.4em;
+      display: flex;
+      align-items: center;
+    }
   }
 
   ol {

packages/account/feature-about/src/lib/containers/about-user/about-user.container.ts

@@ -5,14 +5,17 @@ import { PresentationFacade } from '@devmx/presentation-data-access';
 import { MarkdownComponent } from '@devmx/shared-ui-global/editor';
 import { AuthenticationFacade } from '@devmx/account-data-access';
 import { EventCardListComponent } from '@devmx/event-ui-shared';
+import { IconComponent } from '@devmx/shared-ui-global/icon';
+import { AsyncPipe, KeyValuePipe } from '@angular/common';
 import { markdownToText } from '@devmx/shared-util-data';
 import { EventFacade } from '@devmx/event-data-access';
 import { MatCardModule } from '@angular/material/card';
 import { Graph } from '@devmx/shared-ui-global/graph';
 import { User } from '@devmx/shared-api-interfaces';
 import { ActivatedRoute } from '@angular/router';
-import { AsyncPipe } from '@angular/common';
 import { filter, map, take } from 'rxjs';
+import { MatChipsModule } from '@angular/material/chips';
+import { RolePipe } from '@devmx/account-ui-shared';
 
 @Component({
   selector: 'devmx-about-user',
@@ -25,7 +28,11 @@ import { filter, map, take } from 'rxjs';
     PresentationCardListComponent,
     EventCardListComponent,
     MatProgressBarModule,
+    MatChipsModule,
+    IconComponent,
+    KeyValuePipe,
     AsyncPipe,
+    RolePipe,
   ],
   standalone: true,
 })

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

@@ -8,6 +8,12 @@
 
     <devmx-account-skills />
 
+    <fieldset>
+      <legend>Informações públicas</legend>
+
+      <devmx-account-visibility />
+    </fieldset>
+
     <footer>
       <button mat-flat-button [disabled]="state()">
         {{state() ? state() : 'Salvar'}}

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

@@ -7,7 +7,7 @@
   max-width: 980px;
 
   form {
-    gap: 2em;
+    gap: 64px;
     display: flex;
     flex-direction: row;
 
@@ -36,7 +36,16 @@
     gap: 1em;
     display: flex;
     flex-direction: column;
-    margin-right: 2em;
+    max-width: 580px;
+  }
+
+  fieldset {
+    border: 1px dashed rgba(0, 0, 0, 0.2);
+    border-radius: 0.4em;
+
+    legend {
+      padding: 0.4em;
+    }
   }
 
   footer {

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

@@ -1,3 +1,4 @@
+import { VisibilityComponent } from './visibility/visibility.component';
 import { SelectFileComponent } from '@devmx/shared-ui-global/image';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ProfileComponent } from './profile/profile.component';
@@ -24,6 +25,7 @@ import {
   AuthenticationFacade,
 } from '@devmx/account-data-access';
 
+
 @Component({
   selector: 'devmx-account',
   templateUrl: './account.container.html',
@@ -37,6 +39,7 @@ import {
     ContactComponent,
     SocialComponent,
     SkillsComponent,
+    VisibilityComponent,
     SelectFileComponent,
     MatButtonModule,
     AvatarComponent,

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

@@ -0,0 +1,19 @@
+<div formGroupName="visibility">
+  <mat-checkbox formControlName="email">Endereço de e-mail</mat-checkbox>
+
+  <mat-checkbox formControlName="phone">Telefone</mat-checkbox>
+
+  <mat-checkbox formControlName="gender">Gênero</mat-checkbox>
+
+  <mat-checkbox formControlName="birthday">Data de nascimento</mat-checkbox>
+
+  <mat-checkbox formControlName="roles">Permissões</mat-checkbox>
+
+  <mat-checkbox formControlName="events">Eventos</mat-checkbox>
+
+  <mat-checkbox formControlName="presentations">Apresentações</mat-checkbox>
+
+  <mat-checkbox formControlName="skills">Habilidades</mat-checkbox>
+
+  <mat-checkbox formControlName="photos">Fotos</mat-checkbox>
+</div>

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  flex-direction: column;
+
+  div {
+    display: grid;
+    grid-auto-flow: dense;
+
+    grid-template-columns: repeat(3, 1fr);
+
+    @media (max-width: 1278px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 767px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+}