feat(album): adiciona funcionalidade para marcar pessoas em fotos

closed #119

Author: guiseek

apps/devmx/public/icons/tag-minus.svg

@@ -1,5 +1,5 @@
-import { provideFacades, provideServices, provideUseCases } from './providers';
+import { providePhoto, provideAlbum as $provideAlbum } from './providers';
 
 export function provideAlbum() {
-  return [...provideServices(), ...provideUseCases(), ...provideFacades()];
+  return [...providePhoto(), ...$provideAlbum()];
 }

apps/devmx/public/icons/tag-plus.svg

@@ -5,17 +5,20 @@ import {
   DeletePhotoUseCase,
   FindPhotoByIDUseCase,
   FindPhotosUseCase,
+  UpdatePhotoTagsUseCase,
   UpdatePhotoUseCase,
   UploadPhoto,
   UploadPhotoUseCase,
 } from '@devmx/album-domain/client';
+import { take } from 'rxjs';
 
 export class PhotoFacade extends EntityFacade<Photo> {
   constructor(
     private createPhotoUseCase: CreatePhotoUseCase,
     private findPhotosUseCase: FindPhotosUseCase,
     private findPhotoByIdUseCase: FindPhotoByIDUseCase,
     private updatePhotoUseCase: UpdatePhotoUseCase,
+    private updatePhotoTagsUseCase: UpdatePhotoTagsUseCase,
     private deletePhotoUseCase: DeletePhotoUseCase,
     private uploadPhotoUseCase: UploadPhotoUseCase
   ) {
@@ -49,11 +52,15 @@ export class PhotoFacade extends EntityFacade<Photo> {
   update(data: EditablePhoto) {
     const request$ = this.updatePhotoUseCase.execute(data);
 
-    this.onUpdate(request$);
+    // this.onUpdate(request$);
 
     this.loadOne(data.id);
 
-    return request$;
+    return request$.pipe(take(1));
+  }
+
+  updateTags(data: EditablePhoto) {
+    this.onUpdate(this.updatePhotoTagsUseCase.execute(data));
   }
 
   delete(id: string) {
@@ -67,6 +74,7 @@ export function providePhotoFacade() {
     FindPhotosUseCase,
     FindPhotoByIDUseCase,
     UpdatePhotoUseCase,
+    UpdatePhotoTagsUseCase,
     DeletePhotoUseCase,
     UploadPhotoUseCase,
   ]);

apps/devmx/public/icons/tag.svg

@@ -0,0 +1,23 @@
+import { provideAlbumHttpService } from '../infrastrucure';
+import { provideAlbumFacade } from '../application';
+import {
+  provideCreateAlbumUseCase,
+  provideDeleteAlbumUseCase,
+  provideFindAlbumByIDUseCase,
+  provideFindAlbumsUseCase,
+  provideUpdateAlbumUseCase,
+} from '@devmx/album-domain/client';
+
+export function provideAlbum() {
+  return [
+    provideAlbumHttpService(),
+
+    provideCreateAlbumUseCase(),
+    provideDeleteAlbumUseCase(),
+    provideFindAlbumByIDUseCase(),
+    provideFindAlbumsUseCase(),
+    provideUpdateAlbumUseCase(),
+
+    provideAlbumFacade(),
+  ];
+}

packages/album/data-access/src/lib/album.providers.ts

@@ -1,3 +1,2 @@
-export * from './facades';
-export * from './services';
-export * from './use-cases';
+export * from './album';
+export * from './photo';

packages/album/data-access/src/lib/application/photo.facade.ts

@@ -0,0 +1,27 @@
+import { providePhotoHttpService } from '../infrastrucure';
+import { providePhotoFacade } from '../application';
+import {
+  provideCreatePhotoUseCase,
+  provideDeletePhotoUseCase,
+  provideFindPhotoByIDUseCase,
+  provideFindPhotosUseCase,
+  provideUpdatePhotoTagsUseCase,
+  provideUpdatePhotoUseCase,
+  provideUploadPhotoUseCase,
+} from '@devmx/album-domain/client';
+
+export function providePhoto() {
+  return [
+    providePhotoHttpService(),
+
+    provideCreatePhotoUseCase(),
+    provideDeletePhotoUseCase(),
+    provideFindPhotoByIDUseCase(),
+    provideFindPhotosUseCase(),
+    provideUpdatePhotoTagsUseCase(),
+    provideUpdatePhotoUseCase(),
+    provideUploadPhotoUseCase(),
+
+    providePhotoFacade(),
+  ];
+}

packages/album/data-access/src/lib/providers/album.ts

@@ -1,17 +1,10 @@
 @if (album$ | async; as album) {
-
-<!--  -->
-
-@for (photo of album.photos; track photo.id) {
-
-<figure>
-  <img loading="lazy" [src]="photo.data" [alt]="photo.caption" />
-
-  <figcaption>{{ photo.caption }}</figcaption>
-</figure>
-
-}
-
 <!--  -->
+@let auth = (authFacade.auth$ | async)!;
 
+<div class="grid">
+  @for (photo of album.photos; track photo.id) {
+  <devmx-photo class="photo" [photo]="photo" (click)="open(photo, auth)" />
+  }
+</div>
 }

packages/album/data-access/src/lib/providers/facades.ts

@@ -1,24 +1,30 @@
 :host {
-  gap: 1em;
+  flex: 1;
   padding: 1em;
-  display: grid;
-  grid-auto-flow: dense;
+  display: flex;
+  flex-direction: column;
 
-  grid-template-columns: repeat(4, 1fr);
+  .grid {
+    gap: 1em;
+    display: grid;
+    grid-auto-flow: dense;
 
-  @media (max-width: 1918px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+    grid-template-columns: repeat(4, 1fr);
 
-  @media (max-width: 1278px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
+    @media (max-width: 1918px) {
+      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);
+    @media (max-width: 767px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
   }
 
-  figure {
+  .photo {
     margin: 0;
     // width: calc(100% - 1em);
     box-sizing: border-box;
@@ -29,34 +35,5 @@
     background-color: rgba(0, 0, 0, 0.04);
 
     transition: width 300ms ease-in-out;
-
-    &.selected {
-      width: 16em;
-      transition: width 300ms ease-in-out;
-    }
-
-    img {
-      width: 100%;
-      display: flex;
-      object-fit: cover;
-      height: 24em;
-    }
-
-    figcaption {
-      display: flex;
-      width: 100%;
-      padding: 0.4em;
-      position: absolute;
-      bottom: 0;
-
-      background-color: rgba(0, 0, 0, 0.4);
-      color: rgba(255, 255, 255, 0.6);
-
-      z-index: 100;
-
-      &:empty {
-        display: none;
-      }
-    }
   }
 }

packages/album/data-access/src/lib/providers/index.ts

@@ -1,21 +1,47 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { Album, Authentication, Photo } from '@devmx/shared-api-interfaces';
+import { AlbumFacade, PhotoFacade } from '@devmx/album-data-access';
+import { AuthenticationFacade } from '@devmx/account-data-access';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Album } from '@devmx/shared-api-interfaces';
+import { MatButtonModule } from '@angular/material/button';
 import { AsyncPipe } from '@angular/common';
-import { filter, map } from 'rxjs';
+import { filter, map, take } from 'rxjs';
+import {
+  PhotoComponent,
+  PhotoViewerService,
+  providePhotoViewer,
+} from '@devmx/album-ui-shared';
 
 @Component({
   selector: 'devmx-album',
   templateUrl: './album.container.html',
   styleUrl: './album.container.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterModule, AsyncPipe],
+  imports: [RouterModule, MatButtonModule, PhotoComponent, AsyncPipe],
+  providers: [providePhotoViewer()],
 })
 export class AlbumContainer {
   route = inject(ActivatedRoute);
 
+  authFacade = inject(AuthenticationFacade);
+  albumFacade = inject(AlbumFacade);
+  photoFacade = inject(PhotoFacade);
+
+  photoViewer = inject(PhotoViewerService);
+
   album$ = this.route.data.pipe(
     filter((data) => 'album' in data),
     map((data) => data['album'] as Album)
   );
+
+  open(photo: Photo, auth: Authentication) {
+    this.photoViewer
+      .open({ photo, auth })
+      .closed.pipe(take(1))
+      .subscribe(this.updateTags);
+  }
+
+  updateTags = (photo?: Photo) => {
+    if (photo) this.photoFacade.updateTags(photo);
+  };
 }

packages/album/data-access/src/lib/providers/photo.ts

@@ -20,7 +20,7 @@
         "@angular-eslint/component-selector": [
           "error",
           {
-            "type": "element",
+            "type": ["element", "attribute"],
             "prefix": "devmx",
             "style": "kebab-case"
           }

packages/album/data-access/src/lib/providers/services.ts

@@ -6,7 +6,10 @@
     "@angular/core": "19.0.0",
     "@devmx/shared-ui-global": "0.0.1",
     "@angular/material": "19.0.0",
-    "@devmx/shared-api-interfaces": "0.0.1"
+    "@devmx/shared-api-interfaces": "0.0.1",
+    "@angular/cdk": "19.0.0",
+    "@devmx/account-ui-shared": "0.0.1",
+    "@devmx/shared-util-data": "0.0.1"
   },
   "sideEffects": false
 }

packages/album/data-access/src/lib/providers/use-cases.ts

@@ -1 +1,6 @@
+export * from './photo-viewer/photo-viewer.component';
+export * from './photo-viewer/photo-viewer.service';
 export * from './album-card/album-card.component';
+export * from './tag-user/tag-user.component';
+export * from './tag-user/tag-user.service';
+export * from './photo/photo.component';