feat(account): adiciona habilidades para usuários

closed #76

packages/account/data-source/package.json

@@ -15,7 +15,8 @@
     "passport-jwt": "^4.0.1",
     "@nestjs/passport": "^10.0.3",
     "@devmx/location-data-source": "0.0.1",
-    "@devmx/shared-util-data": "0.0.1"
+    "@devmx/shared-util-data": "0.0.1",
+    "@devmx/learn-data-source": "0.0.1"
   },
   "type": "commonjs",
   "main": "./src/index.js",

packages/account/data-source/src/lib/dtos/index.ts

@@ -12,6 +12,7 @@ export * from './update-user';
 export * from './user-contact';
 export * from './user-profile';
 export * from './user-roles';
+export * from './user-skill';
 export * from './user-social';
 export * from './user';
 export * from './validate-user-code';

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

@@ -1,15 +1,22 @@
-import { IsNotEmpty, IsString, ValidateNested } from 'class-validator';
+import {
+  IsArray,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  ValidateNested,
+} from 'class-validator';
 import { UpdateProfileDto } from './update-profile';
 import { UpdateContactDto } from './update-contact';
 import { Exclude, Type } from 'class-transformer';
-import { ApiProperty } from '@nestjs/swagger';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 import { UserSocialDto } from './user-social';
 import { RolesDto } from './roles';
 import {
   UserCode,
   EditableUser,
   UserPassword,
 } from '@devmx/shared-api-interfaces';
+import { UserSkillDto } from './user-skill';
 
 export class UpdateUserDto implements EditableUser {
   @ApiProperty()
@@ -30,6 +37,13 @@ export class UpdateUserDto implements EditableUser {
   @Exclude()
   roles: RolesDto;
 
+  @IsArray()
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => UserSkillDto)
+  @ApiPropertyOptional({ type: () => [UserSkillDto] })
+  skills: UserSkillDto[];
+
   @ApiProperty()
   @ValidateNested()
   @Type(() => UpdateProfileDto)

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

@@ -0,0 +1,16 @@
+import { UserSkill } from '@devmx/shared-api-interfaces';
+import { IsNotEmpty, IsNumber } from 'class-validator';
+import { SkillDto } from '@devmx/learn-data-source';
+import { ApiProperty } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
+
+export class UserSkillDto implements UserSkill {
+  @IsNumber()
+  @IsNotEmpty()
+  @ApiProperty()
+  weight: number;
+
+  @Type(() => SkillDto)
+  @ApiProperty({ type: () => SkillDto })
+  skill: SkillDto;
+}

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

@@ -5,6 +5,7 @@ import { UserProfileDto } from './user-profile';
 import { ApiProperty } from '@nestjs/swagger';
 import { UserSocialDto } from './user-social';
 import { RolesDto } from './roles';
+import { UserSkillDto } from './user-skill';
 
 export class UserDto implements User {
   @ApiProperty()
@@ -23,6 +24,10 @@ export class UserDto implements User {
   @ApiProperty({ type: () => RolesDto })
   roles: RolesDto;
 
+  @Type(() => UserSkillDto)
+  @ApiProperty({ type: () => [UserSkillDto] })
+  skills: UserSkillDto[];
+
   @ApiProperty()
   @Type(() => UserContactDto)
   contact: UserContactDto;

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

@@ -3,9 +3,10 @@ import { UserContactCollection, UserContactSchema } from './user-contact';
 import { UserProfileCollection, UserProfileSchema } from './user-profile';
 import { UserSocialCollection, UserSocialSchema } from './user-social';
 import { UserCodeCollection, UserCodeSchema } from './user-code';
-import { Roles, User } from '@devmx/shared-api-interfaces';
+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';
 
@@ -25,6 +26,16 @@ export class UserCollection extends Document implements User {
   @Prop({ required: true, type: Object, default: DEFAULT_ROLES })
   roles: Roles;
 
+  @Prop([
+    {
+      type: raw({
+        skill: { type: SkillSchema, required: true },
+        weight: { type: Number, required: true },
+      }),
+    },
+  ])
+  skills: UserSkill[];
+
   @Prop({ required: true, type: raw(UserContactSchema) })
   contact: UserContactCollection;
 

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

@@ -11,6 +11,23 @@ <h3>{{'@' + user.name}}</h3>
   </mat-card-content>
 </mat-card>
 }
+<!--  -->
+
+@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>
+}
+
 <!--  -->
 }
 

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

@@ -11,4 +11,19 @@
     display: flex;
     flex-direction: column;
   }
+
+  ol {
+    padding-left: 1.4em;
+
+    li {
+      margin-bottom: 1em;
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+
+::ng-deep ol li .mdc-linear-progress .mdc-linear-progress__bar-inner {
+  border-color: #3BCE53;
 }

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

@@ -1,5 +1,6 @@
 import { PresentationCardListComponent } from '@devmx/presentation-ui-shared';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { PresentationFacade } from '@devmx/presentation-data-access';
 import { MarkdownComponent } from '@devmx/shared-ui-global/editor';
 import { AuthenticationFacade } from '@devmx/account-data-access';
@@ -23,6 +24,7 @@ import { filter, map, take } from 'rxjs';
     MarkdownComponent,
     PresentationCardListComponent,
     EventCardListComponent,
+    MatProgressBarModule,
     AsyncPipe,
   ],
   standalone: true,

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

@@ -6,6 +6,8 @@
 
     <devmx-account-profile />
 
+    <devmx-account-skills />
+
     <footer>
       <button mat-flat-button>Salvar</button>
     </footer>

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 { SkillsComponent } from './skills/skills.component';
 import { SocialComponent } from './social/social.component';
 import { UserPhoto, provideUserPhoto } from '../../dialogs';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,6 +24,7 @@ import {
   AuthenticationFacade,
 } from '@devmx/account-data-access';
 
+
 @Component({
   selector: 'devmx-account',
   templateUrl: './account.container.html',
@@ -35,6 +37,7 @@ import {
     ProfileComponent,
     ContactComponent,
     SocialComponent,
+    SkillsComponent,
     SelectFileComponent,
     MatButtonModule,
     AvatarComponent,

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

@@ -0,0 +1,45 @@
+<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>
+
+      <strong> {{ item.value.weight }}% </strong>
+    </li>
+    }
+  </ol>
+</div>
+
+<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>

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

@@ -0,0 +1,68 @@
+:host {
+  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;
+        }
+      }
+    }
+  }
+
+  .skills-list {
+    width: 500px;
+    max-width: 100%;
+    overflow: hidden;
+
+
+    li {
+      min-height: 3em;
+      box-sizing: border-box;
+      cursor: move;
+    }
+  }
+
+  .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;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .skills-list.cdk-drop-list-dragging .skills-list li:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}