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 {