DeveloperParana · guiseek · Dec 7, 2024 · Dec 7, 2024
diff --git a/packages/account/feature-admin/src/lib/forms/event.ts b/packages/account/feature-admin/src/lib/forms/event.ts
@@ -65,10 +65,10 @@ export class EventForm extends FormGroup<TypedForm<Event>> {
       }),
       city: new FormControl(),
       cover: new FormControl(),
-      date: new FormControl('', {
-        nonNullable: true,
-        validators: [Validators.required],
-      }),
+      // date: new FormControl('', {
+      //   nonNullable: true,
+      //   validators: [Validators.required],
+      // }),
       time: new FormControl('', {
         nonNullable: true,
         validators: [Validators.required],

diff --git a/...s/account/feature-shell/src/lib/components/album-card-list/album-card-list.component.html b/...s/account/feature-shell/src/lib/components/album-card-list/album-card-list.component.html
@@ -7,7 +7,7 @@
     @for (album of data(); track album.id) {
     <a
       mat-list-item
-      [routerLink]="['/', 'albuns', { outlets: { right: [album.id] } }]"
+      [routerLink]="['/', 'albuns', album.id]"
     >
       <devmx-icon matListItemIcon name="photo" />
       <div matListItemTitle>{{ album.title }}</div>

diff --git a/packages/event/data-source/src/lib/dtos/create-event.ts b/packages/event/data-source/src/lib/dtos/create-event.ts
@@ -36,10 +36,10 @@ export class CreateEventDto implements CreateEvent {
   @ApiPropertyOptional()
   date: Date;
 
-  @IsString()
-  @IsOptional()
-  @ApiPropertyOptional()
-  time: string;
+  // @IsString()
+  // @IsOptional()
+  // @ApiPropertyOptional()
+  // time: string;
 
   @IsString()
   @IsOptional()

diff --git a/packages/event/data-source/src/lib/dtos/created-event.ts b/packages/event/data-source/src/lib/dtos/created-event.ts
@@ -26,8 +26,8 @@ export class CreatedEventDto {
   @Type(() => Date)
   date: Date;
 
-  @ApiProperty()
-  time: string;
+  // @ApiProperty()
+  // time: string;
 
   @ApiProperty()
   cover: string;

diff --git a/packages/event/data-source/src/lib/dtos/event.ts b/packages/event/data-source/src/lib/dtos/event.ts
@@ -26,8 +26,8 @@ export class EventDto {
   @Type(() => Date)
   date: Date;
 
-  @ApiProperty()
-  time: string;
+  // @ApiProperty()
+  // time: string;
 
   @ApiProperty()
   cover: string;

diff --git a/packages/event/feature-page/src/lib/containers/event-page/event-page.container.scss b/packages/event/feature-page/src/lib/containers/event-page/event-page.container.scss
@@ -3,6 +3,7 @@
   gap: 2em;
   display: flex;
   flex-direction: column;
+  background-color: white;
 
   h1 {
     margin: 0;
@@ -48,6 +49,10 @@
   }
 
   .event-page-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
     position: relative;
 
     .rsvp-button {

diff --git a/packages/event/feature-page/src/lib/event-feature-page.component.ts b/packages/event/feature-page/src/lib/event-feature-page.component.ts
@@ -15,6 +15,7 @@ import { filter, map } from 'rxjs';
   `,
   styles: `
     :host {
+      flex: 1;
       display: flex;
       flex-direction: column;
     }

diff --git a/packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.html b/packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.html
@@ -24,13 +24,13 @@
     </mat-list-item>
 
     <mat-list-item>
-      <devmx-icon matListItemIcon name="alarm-clock-alert" />
-      <div matListItemTitle>{{event.time }}h</div>
+      <devmx-icon matListItemIcon name="calendar" />
+      <div matListItemTitle>{{event.date | date: 'shortDate' }}</div>
     </mat-list-item>
 
     <mat-list-item>
-      <devmx-icon matListItemIcon name="calendar" />
-      <div matListItemTitle>{{event.date | date }}</div>
+      <devmx-icon matListItemIcon name="alarm-clock-alert" />
+      <div matListItemTitle>{{event.date | date: 'shortTime' }}h</div>
     </mat-list-item>
 
     @if (event.address) {
@@ -41,6 +41,24 @@
     }
   </mat-list>
 
+  @if (eventFacade.page$ | async; as page) {
+  <mat-card-content class="event-card-buttons">
+    <devmx-calendar-button [data]="page" text="Definir lembrete" />
+
+    @if ((page.format | showEventAddress) && page.address) {
+    <devmx-maps-button [data]="page" text="Ver no mapa" />
+    }
+
+    <!--  -->
+
+    @if ((page.format | showEventLink) && page.link) {
+    <devmx-youtube-button [data]="page" text="Assistir" />
+    }
+
+    <devmx-whats-app-button [data]="page" text="Compartilhar" />
+  </mat-card-content>
+  }
+
   <mat-card-content>
     <devmx-markdown-view [content]="event.description" />
   </mat-card-content>

diff --git a/packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.scss b/packages/event/feature-shell/src/lib/containers/event-details/event-defails.container.scss
@@ -28,6 +28,12 @@
         margin-bottom: 0;
       }
     }
+
+    &-buttons {
+      gap: 1em;
+      display: flex;
+      flex-flow: row wrap;
+    }
   }
 
   .rsvp-button {

diff --git a/packages/event/feature-shell/src/lib/containers/event-details/event-details.container.ts b/packages/event/feature-shell/src/lib/containers/event-details/event-details.container.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { RSVPButtonComponent, RSVPForm } from '@devmx/event-ui-shared';
+import { RSVPButtonComponent, RSVPForm, ShowEventAddressPipe, ShowEventLinkPipe } from '@devmx/event-ui-shared';
 import { MarkdownViewComponent } from '@devmx/shared-ui-global/markdown';
 import { AuthenticationFacade } from '@devmx/account-data-access';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,10 +11,16 @@ import { MatCardModule } from '@angular/material/card';
 import { MatListModule } from '@angular/material/list';
 import { combineLatest, filter, map, tap } from 'rxjs';
 import { AsyncPipe, DatePipe } from '@angular/common';
-import { RSVPFacade } from '@devmx/event-data-access';
+import { EventFacade, RSVPFacade } from '@devmx/event-data-access';
 import { ReactiveFormsModule } from '@angular/forms';
 import { PhotoPipe } from '@devmx/shared-ui-global';
 import { EventFormatPipe } from '../../pipes';
+import {
+  MapsButtonComponent,
+  YoutubeButtonComponent,
+  WhatsAppButtonComponent,
+  CalendarButtonComponent,
+} from '@devmx/shared-ui-global/button';
 
 @Component({
   selector: 'devmx-event-details',
@@ -25,12 +31,18 @@ import { EventFormatPipe } from '../../pipes';
     RouterModule,
     ReactiveFormsModule,
     RSVPButtonComponent,
+    CalendarButtonComponent,
+    YoutubeButtonComponent,
+    WhatsAppButtonComponent,
+    MapsButtonComponent,
     MatCardModule,
     MatListModule,
     MatButtonModule,
     IconComponent,
     EventFormatPipe,
     MarkdownViewComponent,
+    ShowEventAddressPipe,
+    ShowEventLinkPipe,
     PhotoPipe,
     AsyncPipe,
     DatePipe,
@@ -43,6 +55,8 @@ export class EventDetailsContainer {
 
   authFacade = inject(AuthenticationFacade);
 
+  eventFacade = inject(EventFacade)
+
   rsvpFacade = inject(RSVPFacade);
 
   event$ = this.route.data.pipe(

diff --git a/packages/event/ui-shared/src/lib/components/event-card/event-card.component.html b/packages/event/ui-shared/src/lib/components/event-card/event-card.component.html
@@ -8,7 +8,7 @@
   </mat-card-header>
 
   <mat-list>
-    @if (event.date && event.time) {
+    @if (event.date) {
     <mat-list-item>
       <devmx-icon matListItemIcon name="transport/flag-pin" />
       <div matListItemTitle>{{ event.format | eventFormat }}</div>

diff --git a/packages/shared/api-interfaces/src/lib/entities/event.ts b/packages/shared/api-interfaces/src/lib/entities/event.ts
@@ -14,7 +14,7 @@ export interface Event {
 
   date?: Date;
 
-  time?: string;
+  // time?: string;
 
   duration?: DurationTime;
 

diff --git a/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.html b/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.html
@@ -1,4 +1,4 @@
 <a mat-raised-button [href]="link()" target="_blank" rel="noopener,noreferrer">
   <devmx-icon matPreffix name="calendar" size="22" />
-  <span>Adicionar ao calendário</span>
+  <span>{{text()}}</span>
 </a>
diff --git a/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.scss b/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.scss
@@ -1,11 +1,11 @@
 :host {
-  min-width: 202px;
+  min-width: 180px;
   display: inline-flex;
 
   a[href] {
     width: 100%;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
+    padding-left: 0.6em;
+    padding-right: 0.6em;
     border-radius: 8px;
   }
 

diff --git a/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.ts b/packages/shared/ui-global/button/src/lib/calendar-button/calendar-button.component.ts
@@ -19,6 +19,8 @@ import {
 export class CalendarButtonComponent implements AfterViewInit {
   data = input.required<EventPage>();
 
+  text = input('Adicionar ao calendário');
+
   link = signal('');
 
   ngAfterViewInit() {

diff --git a/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.html b/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.html
@@ -1,4 +1,4 @@
 <a mat-raised-button [href]="link()" target="_blank" rel="noopener,noreferrer">
   <devmx-icon matPreffix name="transport/map-pin" size="22" />
-  <span>Abrir com Google Maps</span>
+  <span>{{text()}}</span>
 </a>
diff --git a/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.scss b/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.scss
@@ -1,11 +1,11 @@
 :host {
-  min-width: 202px;
+  min-width: 180px;
   display: inline-flex;
 
   a[href] {
     width: 100%;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
+    padding-left: 0.6em;
+    padding-right: 0.6em;
     border-radius: 8px;
   }
 

diff --git a/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.ts b/packages/shared/ui-global/button/src/lib/maps-button/maps-button.component.ts
@@ -21,6 +21,8 @@ import {
 export class MapsButtonComponent implements AfterViewInit {
   data = input.required<EventPage>();
 
+  text = input('Abrir com Google Maps');
+
   platform = inject(Platform);
 
   link = signal('');

diff --git a/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.html b/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.html
@@ -1,4 +1,4 @@
 <a mat-raised-button [href]="link()" target="_blank" rel="noopener,noreferrer">
   <devmx-icon matPreffix name="social/whatsapp" size="24" />
-  <span>Enviar no WhatsApp</span>
+  <span>{{text()}}</span>
 </a>
diff --git a/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.scss b/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.scss
@@ -1,11 +1,11 @@
 :host {
-  min-width: 202px;
+  min-width: 180px;
   display: inline-flex;
 
   a[href] {
     width: 100%;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
+    padding-left: 0.6em;
+    padding-right: 0.6em;
     border-radius: 8px;
   }
 

diff --git a/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.ts b/packages/shared/ui-global/button/src/lib/whats-app-button/whats-app-button.component.ts
@@ -21,6 +21,8 @@ import {
 export class WhatsAppButtonComponent implements AfterViewInit {
   data = input.required<EventPage>();
 
+  text = input('Enviar no WhatsApp');
+
   platform = inject(Platform);
 
   link = signal('');

diff --git a/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.html b/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.html
@@ -1,4 +1,4 @@
 <a mat-raised-button [href]="link()" target="_blank" rel="noopener,noreferrer">
   <devmx-icon matPreffix name="social/youtube" size="22" />
-  <span>Abrir com YouTube</span>
+  <span>{{text()}}</span>
 </a>
diff --git a/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.scss b/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.scss
@@ -1,11 +1,11 @@
 :host {
-  min-width: 202px;
+  min-width: 180px;
   display: inline-flex;
 
   a[href] {
     width: 100%;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
+    padding-left: 0.6em;
+    padding-right: 0.6em;
     border-radius: 8px;
   }
 

diff --git a/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.ts b/packages/shared/ui-global/button/src/lib/youtube-button/youtube-button.component.ts
@@ -21,6 +21,8 @@ import {
 export class YoutubeButtonComponent implements AfterViewInit {
   data = input.required<EventPage>();
 
+  text = input('Abrir com YouTube')
+
   platform = inject(Platform);
 
   link = signal('');

diff --git a/packages/shared/ui-global/shell/src/lib/app-shell/app-shell.component.scss b/packages/shared/ui-global/shell/src/lib/app-shell/app-shell.component.scss
@@ -29,6 +29,7 @@
     display: flex;
     flex-direction: column;
     max-width: 1280px;
+    width: calc(100% - 2em);
     // height: calc(100dvh - 64px);
     height: 100%;
     overflow: auto;