refactor(album): melhora marcação de pessoas em fotos

DeveloperParana · Dec 30, 2024 · 91864a9 · 91864a9
1 parent 0ba2d08
commit 91864a9
Show file tree

Hide file tree

Showing 74 changed files with 1,236 additions and 173 deletions.
diff --git a/apps/devmx/public/icons/share.svg b/apps/devmx/public/icons/share.svg
diff --git a/apps/devmx/public/portal-devpr-mx.png b/apps/devmx/public/portal-devpr-mx.png
diff --git a/apps/devmx/public/templates/user-tag.html b/apps/devmx/public/templates/user-tag.html
@@ -0,0 +1,89 @@
+<html
+  dir="ltr"
+  lang="pt-br"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&amp;display=swap"
+      rel="stylesheet"
+    />
+
+    <style type="text/css">
+      body {
+        font-family: 'Source Sans 3';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 18px;
+        color: #000000;
+      }
+
+      a:link,
+      a:active,
+      a:visited,
+      a:hover {
+        text-decoration-line: underline;
+        color: #1A84FF;
+      }
+
+      blockquote {
+        margin: 2em 0;
+      }
+
+      footer {
+        font-family: 'Source Sans 3';
+        font-style: normal;
+        line-height: 18px;
+        font-size: 16px;
+
+        order: 0;
+        flex-grow: 0;
+        gap: 3px;
+      }
+
+      footer strong {
+        font-weight: 700;
+      }
+
+      footer p {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h3>Faala {{name}}, belê?</h3>
+
+      <p style="font-size: 120%">
+        Alguém marcou você no album de fotos "<a href="{{url}}">{{title}}</a>"
+        da comunidade.
+      </p>
+
+      <blockquote>
+        <strong>
+          🛟 Você pode remover sua tag da foto se preferir, algumas orientações
+          para isso:
+        </strong>
+        <ol>
+          <li>Clique no botão ☰ no lado direito acima da foto</li>
+          <li>Cliique em Remover minha tag</li>
+          <li>Salvar alterações</li>
+        </ol>
+      </blockquote>
+    </div>
+
+    <hr />
+
+    <footer>
+      <p>
+        <strong>Não responda este e-mail</strong>, pois foi enviado de forma
+        automatizada.
+      </p>
+      <p>Operações <a href="https://devparana.mx">devparana.mx</a>.</p>
+    </footer>
+  </body>
+</html>
diff --git a/apps/devmx/src/scss/_overrides.scss b/apps/devmx/src/scss/_overrides.scss
@@ -1,3 +1,7 @@
+.cdk-overlay-backdrop {
+  background-color: rgba(0,0,0,.9);
+}
+
 ::ng-deep body .align-button.mat-mdc-button .mdc-button__label {
   display: inline-flex;
   align-items: center;

diff --git a/apps/devmx/src/styles.scss b/apps/devmx/src/styles.scss
@@ -1,4 +1,4 @@
-// @use '@angular/cdk/overlay-prebuilt.css';
+@use '@angular/cdk/overlay-prebuilt.css';
 @use '@angular/material' as mat;
 @use './scss/theming/app-shell' as app-shell;
 @use './scss/theme' as theme;

diff --git a/apps/server/src/assets/templates/user-tag.html b/apps/server/src/assets/templates/user-tag.html
diff --git a/apps/server/src/envs/env.dev.ts b/apps/server/src/envs/env.dev.ts
@@ -2,6 +2,7 @@ import { join } from 'node:path';
 
 export const env = {
   production: false,
+  origin: 'http://localhost:4200',
   db: {
     name: process.env.DB_NAME,
     host: process.env.DB_HOST,

diff --git a/apps/server/src/envs/env.prod.ts b/apps/server/src/envs/env.prod.ts
@@ -6,6 +6,7 @@ if (!process.env.MONGO_URI) {
 
 export const env = {
   production: true,
+  origin: 'https://devparana.mx',
   db: {
     name: process.env.DB_NAME,
     host: process.env.DB_HOST,

diff --git a/packages/academy/domain/src/server/use-cases/update-course.ts b/packages/academy/domain/src/server/use-cases/update-course.ts
@@ -1,7 +1,7 @@
 import { UseCase, Course, EditableCourse } from '@devmx/shared-api-interfaces';
 import { CoursesService } from '../services';
 
-export class UpdateCourseUseCase implements UseCase<EditableCourse, Course> {
+export class UpdateCourseUseCase implements UseCase<EditableCourse, Course | null> {
   constructor(private coursesService: CoursesService) {}
 
   async execute(data: EditableCourse) {

diff --git a/packages/academy/domain/src/server/use-cases/update-institution.ts b/packages/academy/domain/src/server/use-cases/update-institution.ts
@@ -6,7 +6,7 @@ import {
 } from '@devmx/shared-api-interfaces';
 
 export class UpdateInstitutionUseCase
-  implements UseCase<EditableInstitution, Institution>
+  implements UseCase<EditableInstitution, Institution | null>
 {
   constructor(private institutionsService: InstitutionsService) {}
 

diff --git a/packages/academy/domain/src/server/use-cases/update-subject.ts b/packages/academy/domain/src/server/use-cases/update-subject.ts
@@ -5,7 +5,7 @@ import {
   EditableSubject,
 } from '@devmx/shared-api-interfaces';
 
-export class UpdateSubjectUseCase implements UseCase<EditableSubject, Subject> {
+export class UpdateSubjectUseCase implements UseCase<EditableSubject, Subject | null> {
   constructor(private subjectsService: SubjectsService) {}
 
   async execute(data: EditableSubject) {

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
@@ -1,4 +1,81 @@
-<form [formGroup]="form" (submit)="onSubmit()">
+<mat-tab-group>
+  <mat-tab label="Conta">
+    <ng-template matTabContent>
+      <form [formGroup]="form" (submit)="onSubmit()">
+        <section>
+          <devmx-account-user />
+
+          <devmx-account-contact />
+
+          <devmx-account-profile />
+
+          <fieldset>
+            <legend>Informações públicas</legend>
+
+            <devmx-account-visibility />
+          </fieldset>
+
+          <footer>
+            <button mat-flat-button [disabled]="state()">
+              {{state() ? state() : 'Salvar'}}
+            </button>
+          </footer>
+        </section>
+
+        <aside>
+          <div class="user-avatar">
+            <devmx-avatar [src]="photo()" />
+            <devmx-select-file
+              class="select-file"
+              (selectChange)="changePhoto($event)"
+            />
+          </div>
+
+          <a
+            mat-stroked-button
+            [routerLink]="['/', 'sobre', form.controls.name.value]"
+          >
+            Acessar página pública
+          </a>
+
+          <devmx-account-social />
+        </aside>
+      </form>
+    </ng-template>
+  </mat-tab>
+
+  <mat-tab label="Biografia">
+    <ng-template matTabContent>
+      <form [formGroup]="form" (submit)="onSubmit()">
+        <section formGroupName="profile">
+          <devmx-markdown-toolbar>
+            <devmx-markdown-editor
+              label="Bio"
+              #editor="markdownEditor"
+              formControlName="minibio"
+              [maxRows]="64"
+            />
+            <devmx-markdown-view
+              [content]="form.profile.controls.minibio?.value ?? ''"
+            />
+          </devmx-markdown-toolbar>
+        </section>
+      </form>
+    </ng-template>
+  </mat-tab>
+
+  <mat-tab label="Habilidades">
+    <ng-template matTabContent>
+      <form [formGroup]="form" (submit)="onSubmit()">
+        <section>
+          <devmx-account-skills />
+        </section>
+      </form>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
+
+<!-- <form [formGroup]="form" (submit)="onSubmit()">
   <section>
     <devmx-account-user />
 
@@ -53,4 +130,4 @@
 
     <devmx-account-social />
   </aside>
-</form>
+</form> -->
diff --git a/packages/account/feature-shell/src/lib/containers/account/account.container.scss b/packages/account/feature-shell/src/lib/containers/account/account.container.scss
@@ -4,13 +4,13 @@
   padding: 1em;
   display: flex;
   flex-direction: column;
-  max-width: 980px;
+  // max-width: 980px;
 
   form {
     gap: 64px;
     display: flex;
     flex-direction: row;
-
+    padding-top: 2em;
     @media (max-width: 768px) {
       flex-direction: column-reverse;
     }
@@ -36,7 +36,7 @@
     gap: 1em;
     display: flex;
     flex-direction: column;
-    max-width: 580px;
+    // max-width: 580px;
   }
 
   fieldset {

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
@@ -11,6 +11,7 @@ import { UserPhoto, provideUserPhoto } from '../../dialogs';
 import { MatButtonModule } from '@angular/material/button';
 import { AvatarComponent } from '@devmx/shared-ui-global';
 import { UpdatePhoto } from '@devmx/account-data-access';
+import { MatTabsModule } from '@angular/material/tabs';
 import { UserComponent } from './user/user.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -27,6 +28,7 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 
+
 @Component({
   selector: 'devmx-account',
   templateUrl: './account.container.html',
@@ -46,6 +48,7 @@ import {
     VisibilityComponent,
     SelectFileComponent,
     MatButtonModule,
+    MatTabsModule,
     AvatarComponent,
     RouterLink,
   ],

diff --git a/packages/account/ui-shared/src/lib/components/search-user/search-user-except.pipe.ts b/packages/account/ui-shared/src/lib/components/search-user/search-user-except.pipe.ts
@@ -0,0 +1,13 @@
+import { UserRef } from '@devmx/shared-api-interfaces';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'searchUserExcept',
+})
+export class SearchUserExceptPipe implements PipeTransform {
+  transform<U extends UserRef>(value: U[], except: U[] = []) {
+    if (except.length === 0) return value;
+
+    return value.filter((user) => except.some((u) => u.id !== user.id));
+  }
+}
diff --git a/packages/account/ui-shared/src/lib/components/search-user/search-user.component.html b/packages/account/ui-shared/src/lib/components/search-user/search-user.component.html
@@ -1,15 +1,18 @@
 <mat-form-field>
   <mat-label>{{ label() }}</mat-label>
+
   <input matInput [formControl]="control" [matAutocomplete]="auto" />
+
   <mat-hint>{{ hint() }}</mat-hint>
+
   <mat-autocomplete
     #auto="matAutocomplete"
     [displayWith]="displayFn"
     (optionSelected)="onOptionSelected($event.option.value)"
   >
     @if (userFacade.response$ | async; as response) {
     <!--  -->
-    @for (option of response.data; track option.id) {
+    @for (option of response.data | searchUserExcept: except(); track $index) {
     <mat-option [value]="option">{{ option.displayName }}</mat-option>
     }
     <!--  -->

diff --git a/packages/account/ui-shared/src/lib/components/search-user/search-user.component.ts b/packages/account/ui-shared/src/lib/components/search-user/search-user.component.ts
@@ -1,12 +1,13 @@
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { SearchUserExceptPipe } from './search-user-except.pipe';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { User, UserRef } from '@devmx/shared-api-interfaces';
 import { MatInputModule } from '@angular/material/input';
 import { UserFacade } from '@devmx/account-data-access';
-import { User } from '@devmx/shared-api-interfaces';
-import { AsyncPipe } from '@angular/common';
 import { debounceTime, filter, startWith } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
 import {
   input,
   inject,
@@ -23,6 +24,7 @@ import {
   imports: [
     ReactiveFormsModule,
     MatAutocompleteModule,
+    SearchUserExceptPipe,
     MatFormFieldModule,
     MatInputModule,
     AsyncPipe,
@@ -39,6 +41,8 @@ export class SearchUserComponent {
 
   control = new FormControl<string | User>('');
 
+  except = input<UserRef[]>([]);
+
   constructor() {
     this.control.valueChanges
       .pipe(

diff --git a/packages/album/data-access/src/lib/application/photo.facade.ts b/packages/album/data-access/src/lib/application/photo.facade.ts
@@ -16,7 +16,6 @@ import {
   UploadPhotoUseCase,
 } from '@devmx/album-domain/client';
 
-
 export class PhotoFacade extends EntityFacade<Photo> {
   constructor(
     private createPhotoUseCase: CreatePhotoUseCase,
@@ -65,7 +64,7 @@ export class PhotoFacade extends EntityFacade<Photo> {
   }
 
   updateTags(data: UpdatePhotoTags) {
-    this.onUpdate(this.updatePhotoTagsUseCase.execute(data));
+    return this.updatePhotoTagsUseCase.execute(data);
   }
 
   delete(id: string) {

diff --git a/packages/album/data-access/src/lib/resolvers/index.ts b/packages/album/data-access/src/lib/resolvers/index.ts
@@ -1 +1,2 @@
-export * from './album-resolver-wrapped';
+export * from './album-resolver-wrapped';
+export * from './photo-resolver-wrapped';
diff --git a/packages/album/data-access/src/lib/resolvers/photo-resolver-wrapped.ts b/packages/album/data-access/src/lib/resolvers/photo-resolver-wrapped.ts
@@ -0,0 +1,11 @@
+import { Params } from '@devmx/shared-api-interfaces';
+import { PhotoFacade } from '../application';
+import { distinctUntilChanged, filter } from 'rxjs';
+
+export const photoResolverWrapped = (facade: PhotoFacade, params: Params) => {
+  facade.loadOne(params['id']);
+  return facade.selected$.pipe(
+    distinctUntilChanged(),
+    filter((photo) => !!photo)
+  );
+};